feat: 商品评价

2026-07-09 14:10:48 +08:00
parent b95d54001f
commit 2ef2ceaa44
9 changed files with 1218 additions and 1047 deletions
@@ -0,0 +1,207 @@
+<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>