applet/components/ld-comment/ld-comment.vue

<template>
  <view class="ct-list">
    <view
      class="ct-item u-border-one-one pd40"
      v-for="(v, i) in value"
      :key="i"
    >
      <view>
        <view class="u-flex-center-sba">
          <view class="u-flex">
            <image
              class="u-avatar83"
              v-if="v.userAvatar"
              :src="v.userAvatar"
            ></image>
            <image class="u-avatar83" v-else :src="$defaultAvata"></image>

            <view class="u-font28 u-1A1A1A u-ml20 avatar-start">
              <view class="u-text-width">{{ v.userNickname || "" }}</view>
              <view class="comment-start">
                <!-- <text v-for="(item,index) in 5" :key="index" class="iconfont2" :class="v.commentScore >=item?'grade-active':'u-B3B3B3'" style="font-size: 35rpx;margin-right: 11.5rpx;">&#xe60f;</text> -->
                <uv-rate
                  :count="5"
                  v-model="v.commentScore"
                  readonly
                  activeColor="#ffc336"
                  inactiveColor="#B3B3B3"
                  size="35rpx"
                  gutter="4rpx"
                ></uv-rate>
              </view>
            </view>
          </view>
          <view class="u-font24 u-999 time">{{ v.commentTime }}</view>
        </view>
        <view class="ml100">
          <view style="margin-top: 10rpx" class="u-font28 u-999">{{
            v.comment
          }}</view>
          <view class="u-mt15 ctImg" v-if="v.commentImages">
            <image
              class="u-ctImg180"
              v-for="(imgItem, index) in v.commentImages"
              :key="index"
              :src="imgItem"
              mode=""
              @click.stop="previewImage(v.commentImages, index)"
            ></image>
          </view>
        </view>
      </view>

      <view v-if="v.reply && v.reply.content">
        <view class="ml100">
          <view class="u-font28 u-999">商家回复：{{ v.reply.content }}</view>
        </view>
      </view>
    </view>
    <view v-if="value.length == 0">
      <view class="no-data">
        <image :src="$handleImageUrl('/nodata.png')"></image>
        <div>暂无评价~</div>
      </view>
    </view>
  </view>
</template>

<script setup name="ld-comment">
import { ref, watch } from "vue";
const props = defineProps({
  value: {
    type: Array,
    default: function () {
      return [];
    },
  },
});
const gradeNum = ref(3);
const dealImg = (v) => {
  let result = [];
  if (v) {
    result = v.split(",");
  }
  return result;
};

const previewImage = (imgList, index) => {
  uni.previewImage({
    urls: imgList,
    current: index,
  });
};

</script>

<style lang="scss">
.u-flex-center-sba {
  display: flex;
  flex-direction: row;
  // align-items: center;
  justify-content: space-between;
}
.avatar-start {
  display: flex;
  height: 83rpx;
  flex-direction: column;
  justify-content: space-between;
}
.comment-start {
  // margin-top: 20rpx;
}
.time {
  font-size: 24rpx;
}
.ml100 {
  margin-left: 100rpx;
}

.pd40 {
  padding-top: 40rpx;
  padding-bottom: 40rpx;
}

.ctImg image:not(:nth-child(3n)) {
  margin-right: 10rpx;
}

.grade-active {
  color: #ffc336;
}

.u-B3B3B3 {
  color: #b3b3b3;
}

.no-data {
  text-align: center;
  padding: 20rpx 0;
  color: #999999;
}

.no-data image {
  width: 430rpx;
  height: 278rpx;
}
.u-avatar83 {
  width: 83rpx;
  height: 83rpx;
  border-radius: 50%;
}
</style>