zhishifufei_uniapp/components/EvaluateList/index.vue

<template>
  <view class="evaluate-list">
    <view class="evaluate-item" v-for="(item, idx) of evaluateList" :key="idx">
      <view>
        <view>
          <image :src="item.avatar" :alt="item.avatar" />
        </view>
        <view>
          {{ item.nickname | convertName }}<text v-if="item.is_selected">精选</text>
        </view>
        <view>
          <text
            v-for="star in 5"
            :key="star"
            :class="{ on: star <= item.star }"
            class="iconfont iconxing"
          ></text>
        </view>
        <view>{{ item.add_time }}</view>
      </view>
      <view>{{ item.comment || "此用户未填写评价内容" }}</view>
      <view v-if="item.pics.length" class="img-group">
        <image
          v-for="(photo, idx) in item.pics"
          :key="photo"
          @click="handlePreview(idx, item.pics)"
          :src="photo"
        />
      </view>
      <view v-if="item.merchant_reply_content" class="reply">
        <view><text>官方回复</text>：{{ item.merchant_reply_content }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    evaluateList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    handlePreview(current, urls) {
      uni.previewImage({
        current,
        urls,
      });
    },
  },
  filters: {
    convertName(value) {
      return value.replace(/^(.).+(.)$/g, "$1**$2");
    },
    convertTime(value) {
      return value;
      //   return moment(value).fromNow();
    },
  },
};
</script>

<style scoped lang="scss">
.evaluate-list {
  background-color: #ffffff;
}

.evaluate-list .evaluate-item {
  position: relative;
  padding: 30rpx;
  font-size: 28rpx;
  color: #282828;
}

.evaluate-list .evaluate-item + .evaluate-item::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  left: 106rpx;
  z-index: 2;
  height: 1px;
  border-top: 1px solid #f1f1f1;
  color: #f1f1f1;
  transform-origin: left top;
  transform: scaleY(0.5);
}

.evaluate-list .evaluate-item > view:first-child {
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -moz-box-align: center;
  align-items: center;
}

.evaluate-list .evaluate-item > view:first-child image {
  display: block;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #82848f;
  object-fit: cover;
  pointer-events: none;
  overflow: hidden;
}

.evaluate-list .evaluate-item > view:first-child view + view {
  margin-left: 20rpx;
}

.evaluate-list .evaluate-item > view:first-child view:nth-child(2) text {
  display: inline-block;
  width: 52rpx;
  height: 26rpx;
  border: 1px solid #2c8eff;
  border-radius: 4rpx;
  margin-left: 10rpx;
  box-sizing: border-box;
  font-size: 18rpx;
  line-height: 26rpx;
  text-align: center;
  color: #2c8eff;
}

.evaluate-list .evaluate-item > view:first-child view:nth-child(3) {
  flex: 1;
}

.evaluate-list .iconfont {
  font-size: 24rpx;
  color: #ccc;
}

.evaluate-list .iconfont + .iconfont {
  margin-left: 7rpx;
}

.evaluate-list .iconfont.on {
  color: #ff6b00;
}

.evaluate-list .evaluate-item > view:first-child view:last-child {
  font-size: 22rpx;
  color: #999999;
}

.evaluate-list .evaluate-item > view + view {
  margin-top: 20rpx;
  margin-left: 76rpx;
}

.evaluate-list .img-group {
  margin-bottom: -22rpx;
  font-size: 0;
}

.evaluate-list .img-group image {
  width: 190rpx;
  height: 190rpx;
  border-radius: 6rpx;
  margin-right: 22rpx;
  margin-bottom: 22rpx;
  -o-object-fit: cover;
  object-fit: cover;
}

.evaluate-list .img-group image:nth-child(3n + 3) {
  margin-right: 0;
}

.evaluate-list .reply {
  overflow: hidden;
}

.evaluate-list .reply view {
  position: relative;
  padding: 20rpx 34rpx;
  border-radius: 6rpx;
  margin-top: 15rpx;
  background-color: #f7f7f7;
  font-size: 26rpx;
  color: #454545;
}

.evaluate-list .reply view::before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 60rpx;
  border-width: 15rpx;
  border-style: solid;
  border-color: transparent transparent #f7f7f7;
}

.evaluate-list .reply text {
  color: #333999;
}
</style>