frontend-app/pages/other_package/productInfo/evaluation.vue

<template>
  <view class="evaluation-wrap">
    <view class="eval-header">
      <view class="title">商品评价 ({{ totalCount }})</view>
      <view class="more" @click="goMore">
        <view class="rate"
          >查看全部
          <up-image
            src="/static/common/right.png"
            width="14"
            height="14"
            bgColor="#f1f6ff00"
            class="arrow"
          ></up-image
        ></view>
      </view>
    </view>
    <view class="eval-list">
      <view class="eval-item" v-for="(item, index) in list" :key="index">
        <view class="user-info">
          <view class="user-left">
            <image
              class="avatar"
              :src="item.avatar || defaultAvatar"
              mode="aspectFill"
            ></image>
            <text class="username">{{ item.userName }}</text>
          </view>
          <view class="user-right">
            <view class="stars">
              <text
                v-for="s in 5"
                :key="s"
                class="star-icon"
                :style="{ color: s <= item.score ? '#7934F6' : '#e5e5e5' }"
                >★</text
              >
            </view>
          </view>
        </view>

        <view class="eval-content">
          <text class="text-desc">{{ item.content }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Evaluation",
  props: {
    // 允许父组件(productInfo)传入真实的评价数据
    evalData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 默认头像，网络图片或本地图片路径均可
      defaultAvatar: "https://img.yzcdn.cn/vant/cat.jpeg",
      totalCount: "99+",
      list: [
        {
          avatar: "",
          userName: "张***三",
          score: 5, // 星级评分，满分5
          content:
            "商品质量非常不错，和描述的一模一样，做工精细没有多余线头，穿着很舒服，下次还会来购买的！强烈推荐给大家！",
          images: [
            "https://img.yzcdn.cn/vant/apple-1.jpg",
            "https://img.yzcdn.cn/vant/apple-2.jpg",
          ],
          createTime: "2026-06-15",
          spec: "颜色: 经典黑; 尺码: XL",
        },
      ],
    };
  },
  methods: {
    // 点击查看全部评价
    goMore() {
      // 触发父组件的事件，或者直接在这里写路由跳转
      this.$emit("goMore");
      // uni.navigateTo({ url: '/pages/evaluation/list' });
    },
    // 图片预览
    previewImg(urls, current) {
      uni.previewImage({
        urls,
        current,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluation-wrap {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  /* 自适应父级宽度，可根据页面情况调整 margin */
  margin: 20rpx auto;
  box-sizing: border-box;
}

/* 头部样式 */
.eval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  .more {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #999999;
    line-height: 1;

    .rate {
      color: #999999;
      margin-right: 4rpx;
      .arrow {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

/* 评价列表区域 */
.eval-list {
  .eval-item {
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f0f2f5;

    /* 最后一条数据不显示下边框 */
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
  }

  /* 用户信息行 */
  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .user-left {
      display: flex;
      align-items: center;

      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #f0f2f5;
        margin-right: 16rpx;
      }

      .username {
        font-size: 26rpx;
        color: #333333;
      }
    }

    .user-right {
      .stars {
        display: flex;
        .star-icon {
          font-size: 26rpx;
          margin-left: 6rpx;
        }
      }
    }
  }

  /* 评价文字 */
  .eval-content {
    margin-bottom: 16rpx;
    .text-desc {
      font-size: 28rpx;
      color: #333333;
      line-height: 1.5;
      /* 多行文本超过3行自动出现省略号 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
}
</style>