new-greemall-wxapp/packageGoods/pages/evaluate.vue

<template>
  <view class="app-container">
    <view class="top-container" v-if="dataList.length">
      <view class="top">
        <view class="left">
          <text>综合评分</text
          ><uni-rate
            :size="18"
            :margin="4"
            :value="5"
            color="#fff"
            active-color="#FE781F"
            :readonly="true"
          />
        </view>
        <view class="right">{{ countDetail.goodRate }}%好评</view>
      </view>
      <view class="tabs">
        <view
          class="item"
          :class="currentTab === '' ? 'current' : ''"
          @tap="changeTabs('')"
          >全部</view
        >
        <block v-for="(item, index) in countDetail.tagCountList" :key="index">
          <view
            class="item"
            :class="currentTab === item.tag ? 'current' : ''"
            @tap="changeTabs(item.tag)"
            >{{ item.tag }}({{ item.total }})</view
          >
        </block>
      </view>
    </view>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="top">
          <view class="user">
            <image
              :src="item.avatar"
              mode="aspectFill"
              v-if="item.avatar.indexOf('http') >= 0"
            ></image>
            <image
              :src="imageUrl + item.avatar"
              mode="aspectFill"
              v-else
            ></image>
            <view class="name ellipsis">{{ item.userName }}</view>
          </view>
          <view class="date">{{ item.createTime }}</view>
        </view>
        <view class="rate">
          <view class="it"
            ><text>商品质量</text
            ><uni-rate
              :size="14"
              :margin="4"
              :value="item.commentGoods"
              color="#fff"
              active-color="#FE781F"
              :readonly="true"
          /></view>
          <view class="it"
            ><text>服务质量</text
            ><uni-rate
              :size="14"
              :margin="4"
              :value="item.commentService"
              color="#fff"
              active-color="#FE781F"
              :readonly="true"
          /></view>
          <view class="it"
            ><text>配送质量</text
            ><uni-rate
              :size="14"
              :margin="4"
              :value="item.commentExpress"
              color="#fff"
              active-color="#FE781F"
              :readonly="true"
          /></view>
        </view>
        <view class="tags">
          <view class="it" v-for="(it, idx) in item.tags" :key="idx">{{
            it
          }}</view>
        </view>
        <!-- <view class="tagss">
					<view class="it" v-for="(it, idx) in item.tags">#{{it}}#</view>
				</view> -->
        <view class="content">{{ item.content }}</view>
        <view class="images" v-if="item.imgs && item.imgs.length > 0">
          <image
            v-for="(it, idx) in item.imgs"
            :key="idx"
            :src="it"
            @tap="previewEvaluateImage(it, item.imgs)"
          ></image>
        </view>
      </view>
    </view>
    <no-data v-if="!dataList.length" :showText="'暂无记录'"></no-data>
    <loading-text
      v-if="dataList.length"
      :loading="loading"
      :noMore="noMore"
    ></loading-text>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      imageUrl: this.$imageUrl,
      configInfo: uni.getStorageSync('configInfo'),
      goodsId: null,
      countDetail: {},
      dataList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      noMore: false,
      loading: false,
      currentTab: '',
    };
  },

  computed: {
    ...mapState(['userInfo', 'isLogin', 'userId']),
  },

  onLoad({ goodsId }) {
    this.goodsId = goodsId;
    this.getList();
    this.getCount();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getList();
    this.getCount();
  },

  // 上拉加载
  onReachBottom() {
    this.getList(1);
  },

  methods: {
    // 获取统计
    getCount() {
      this.$axios({
        url: '/order/comment/goods/count',
        method: 'get',
        params: {
          goodsId: this.goodsId,
        },
      }).then((res) => {
        this.countDetail = res.data;
      });
    },

    // 获取列表
    getList(loadMore) {
      if (this.noMore && loadMore) return;
      this.noMore = false;
      if (!loadMore) {
        this.pageNum = 1;
      } else {
        this.loading = true;
      }
      this.$axios({
        url: '/order/comment/goods',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize,
          goodsId: this.goodsId,
          tag: this.currentTab,
        },
        isLoading: !loadMore,
      }).then((res) => {
        let _list = res.data.records;
        let pageTotal = res.data.pages;
        if (this.pageNum >= pageTotal) {
          this.noMore = true;
        }
        if (_list.length) {
          this.pageNum += 1;
        }
        if (loadMore) {
          this.dataList = this.dataList.concat(_list);
          this.loading = false;
        } else {
          this.dataList = _list;
        }
        this.total = res.data.total || 0;

        uni.stopPullDownRefresh();
      });
    },

    changeTabs(tag) {
      this.currentTab = tag;
      this.pageNum = 1;
      this.getList();
    },

    // 预览评价图片
    previewEvaluateImage(url, imgs) {
      uni.previewImage({
        urls: imgs,
        current: url,
      });
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background: #f4f2f2;
  box-sizing: border-box;
}
.top-container {
  background: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333333;
      margin-top: 5rpx;
      & > text {
        margin-right: 14rpx;
      }
    }
    .right {
      font-size: 24rpx;
      color: #666666;
    }
  }
  .tabs {
    display: flex;
    overflow-x: scroll;
    .item {
      flex-shrink: 0;
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 52rpx;
      padding: 0 25rpx;
      border: 1px solid #eaeaea;
      color: #333333;
      font-size: 24rpx;
      margin-right: 16rpx;
      margin-top: 16rpx;
      &.current {
        border: 1px solid #fe781f;
        background: #fe781f;
        color: #ffffff;
      }
    }
  }
}
.list-container {
  padding: 0 20rpx;
  background: #ffffff;
  .item {
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    &:last-child {
      border-bottom: none;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user {
        display: flex;
        align-items: center;
        image {
          width: 80rpx;
          height: 80rpx;
          display: block;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .name {
          font-size: 28rpx;
          color: #333333;
          width: 300rpx;
        }
      }
      .date {
        font-size: 28rpx;
        color: #999999;
      }
    }
    .rate {
      margin-top: 14rpx;
      .it {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        margin-top: 5rpx;
        & > text {
          margin-right: 10rpx;
        }
      }
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      .it {
        line-height: 44rpx;
        padding: 0 15rpx;
        border: 1px solid #eaeaea;
        border-radius: 44rpx;
        font-size: 24rpx;
        margin-right: 14rpx;
        margin-top: 14rpx;
        color: #666666;
      }
    }
    .tagss {
      display: flex;
      flex-wrap: wrap;
      margin-top: 14rpx;
      .it {
        font-size: 24rpx;
        color: #fe781f;
        margin-right: 6rpx;
      }
    }
    .content {
      font-size: 28rpx;
      color: #333333;
      margin-top: 14rpx;
    }
    .images {
      display: flex;
      flex-wrap: wrap;
      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>