zsw-farm-bxg/components/UserEvaluation.vue

<template>
  <view class="evaluateWtapper" v-if="reply&&reply.length>0">
    <view v-for="(item, evaluateWtapperIndex) in reply" :key="evaluateWtapperIndex">
      <view class="evaluateItem" v-if="item">
        <view class="pic-text acea-row row-middle">
          <view class="pictrue">
            <image :src="item.avatar" class="image" />
          </view>
          <view class="">
          <!-- <view class="acea-row row-middle"> -->
            <view class="name line1">{{ item.nickname }}</view>
            <!-- <view class="start" :class="'star' + item.star"></view> -->
						<view class="starBox acea-row">
							<image src="@/static/images/min-star-light.png" v-for="(item, index) in stars[evaluateWtapperIndex]" :key="index"></image>
							<image src="@/static/images/min-star.png" v-for="(item, index) in 5-stars[evaluateWtapperIndex]" :key="index"></image>
						</view>
          </view>
        </view>
        <!-- <view class="time">{{ item.createTime }} {{ item.sku||'' }}</view> -->
        <view class="evaluate-infor">{{ item.comment }}</view>
        <view class="imgList acea-row" v-if="item.picturesArr.length">
          <view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
            <image :src="itemn" class="image" />
          </view>
        </view>
        <!-- <view class="reply" v-if="item.merchantReplyContent">
          <span class="font-color-red">电商店员</span>
          ：{{item.merchantReplyContent}}
        </view> -->
      </view>
    </view>
  </view>
</template>
<script>
  import {
    dataFormat
  } from "@/utils";

  export default {
    name: "UserEvaluation",
    props: {
      reply: {
        type: Array,
        default: () => []
      }
    },
    data: function () {
      return {
				stars: []
			};
    },
    mounted: function () {
      this.stars = this.reply.map( val => {
      	return val.star*1;
      })
    },
    methods: {
      dataFormat
    }
  };
</script>
<style lang="less" scoped>
	.starBox {
		padding-top: 4rpx;
		image {
			width: 26rpx;
			height: 26rpx;
		}
	}
</style>