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.userImage" mode="aspectFill"></image>
            <text class="username">{{ item.userName }}</text>
          </view>
          <view class="user-right">
            <view class="stars">
              <text v-for="s in item.rating" :key="s" class="star-icon"
                :style="{ color: s <= item.rating ? '#7934F6' : '#e5e5e5' }">★</text>
            </view>
          </view>
        </view>

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

<script>
import { getGoodsReviewsList } from "@/api/product.js";

export default {
  name: "Evaluation",
  props: {
    // 允许父组件(productInfo)传入真实的评价数据
    evalData: {
      type: Object,
      default: () => ({}),
    },
    evalId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 默认头像，网络图片或本地图片路径均可
      totalCount: "99+",
      list: [],
    };
  },
  mounted() {
    this.getGoodsReviewsList();
  },
  methods: {
    async getGoodsReviewsList() {
      const params = {
        goodsId: this.evalId,
      };
      const resp = await getGoodsReviewsList(params);
      if (resp && resp.bizcode === 100) {
        this.list = (resp.data.entitys || []).slice(0, 2);
        this.totalCount = resp.data.totalCount || "0";
      }
    },
    // 点击查看全部评价
    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;
      display: flex;

      .arrow {
        display: inline-block;
        vertical-align: middle;
        margin-left: 4rpx;
      }
    }
  }
}

/* 评价列表区域 */
.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>