frontend-app/pages/other_package/productInfo/evaluate-dialog.vue

<template>
  <view class="content">
    <up-popup
      :show="show"
      :round="20"
      :closeOnClickOverlay="false"
      :closeable="true"
      :safeAreaInsetBottom="false"
      @close="handleClose"
    >
      <view class="evaluate-popup">
        <!-- 固定的标题头部 -->
        <view class="popup-header">
          <text class="title">评价</text>
        </view>

        <!-- 固定的切换标签 -->
        <view class="filter-tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['filter-tab', { active: activeTab === tab.value }]"
            @click="handleTabClick(tab)"
          >
            {{ tab.name }}
          </view>
        </view>

        <!-- 可上下滚动的评价列表区域 -->
        <scroll-view
          class="eval-scroll"
          scroll-y
          :enhanced="true"
          :show-scrollbar="false"
        >
          <view class="eval-list" >
            <view
              class="eval-item"
              v-for="(item, index) in evalList"
              :key="index"
              @click="handleClick(item)"
            >
              <view class="user-info-row">
                <view class="user-avatar-name">
                     <image
                  class="avatar-wrap"
                  :src="item.userImage"
                  mode="aspectFill"
                ></image>
                  <text class="username">{{ item.userName }}</text>
                  <view class="user-level">
                    <up-image
                      src="/static/common/rz.png"
                      width="13"
                      height="12"
                      bgColor="#f1f6ff00"
                      class="arrow"
                    ></up-image>
                    <text class="level-text">星级用户</text>
                  </view>
                </view>
                <view class="rating-tag">
                  <view class="stars">
                    <text
                      v-for="s in 5"
                      :key="s"
                      class="star-icon"
                      :style="{
                        color: s <= item.rating ? '#7934f6' : '#e5e5e5',
                      }"
                      >★</text
                    >
                  </view>
                  <text class="tag">{{ item.tag }}</text>
                </view>
              </view>

              <view class="product-sku"
                >已购{{item.goodsName}}</view
              >

              <view class="eval-content-text">
                <text style="white-space:pre-wrap"
                  >{{item.content}}</text
                >
              </view>

              <view class="eval-images" v-if="item.images">
                <image
                  class="eval-img"
                  :src="item.images"
                  mode="aspectFill"
                ></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </up-popup>
  </view>
</template>

<script>
import { getGoodsReviewsList } from "@/api/product.js";
export default {
  name: "EvaluateDialog",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    evalId: {
      type: Number,
      default: 0,
    },
    mainGraph: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      activeTab: "all",
      tabs: [
        { name: "全部", value: "all" },
        { name: "好评", value: "5" },
        { name: "中/差评", value: "4" },
      ],
      evalList: [],
    };
  },
   mounted(){
    this.getGoodsReviewsList();
  },
  methods: {
    async getGoodsReviewsList() {
      const params = {
        page: 1,
        pageSize: 15,
        goodsId: this.evalId,
      };
      if (this.activeTab !== "all") {
        params.rating = this.activeTab;
      }
      const resp = await getGoodsReviewsList(params);
      if (resp && resp.bizcode === 100) {
        this.evalList = resp.data.entitys || [];
      }
    },
    handleTabClick(item) {
      this.activeTab = item.value
      this.getGoodsReviewsList();
    },
    handleClose() {
      this.$emit("close");
    },
    handleClick(item) {
      console.log('点击评价',item.goodsName);
      uni.navigateTo({
        url: "/pages/other_package/productInfo/evaluateDetail?evalId=" + item.id + "&mainGraph=" + this.mainGraph + "&name=" + this.name+"&goodsName="+item.goodsName,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluate-popup {
  height: 85vh; /* 改为固定高度百分比，使内部 flex 自适应支撑起滚动条 */
  background-color: #f6f6f6;
  border-radius: 20rpx 20rpx 0 0;
  display: flex;
  flex-direction: column;
}

.popup-header {
  text-align: center;
  font-size: 30rpx;
  background-color: #ffffff;
  color: #333333;
  font-weight: 500;
  padding: 30rpx 0 20rpx;
  position: relative;
  border-radius: 20rpx 20rpx 0 0;
  margin: 0 20rpx;
}

.filter-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 10rpx 30rpx 30rpx;
  gap: 24rpx; /* 标签之间的标准间距 */
  margin: 0 20rpx;
  border-top: 1rpx solid #f6f6f6;

  .filter-tab {
    text-align: center;
    font-size: 26rpx;
    color: #333333;
    padding: 12rpx 32rpx; /* 改用横向内边距，使其宽度根据内容自适应且规范 */
    border-radius: 8rpx;   /* 契合图片的轻微小圆角 */
    background-color: #f5f5f7; /* 未激活状态的浅灰色 */
    transition: all 0.2s ease-in-out;

    &.active {
      background-color: #f2ecff; /* 激活时如图片所示的极浅紫色背景 */
      color: #7934f6;            /* 激活时的标志性紫色字体 */
      font-weight: 500;
    }
  }
}

.eval-scroll {
  flex: 1; /* 核心：占满剩余所有的垂直空间 */
  height: 0; /* 必须设置为0，防止容器被子内容撑开导致无法滚动 */
  overflow: hidden;
}

.eval-list {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  padding-bottom: 40rpx; /* 底部预留间距 */

  .eval-item {
    padding: 30rpx 30rpx 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin: 0 20rpx;
  }

  .user-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .user-avatar-name {
      display: flex;
      align-items: center;

      .avatar-wrap {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;

        .avatar-text {
          font-size: 32rpx;
          color: #ffffff;
        }
      }

      .username {
        font-size: 32rpx;
        color: #000000;
        font-weight: 500;
        margin-right: 28rpx;
      }

      .user-level {
        display: flex;
        align-items: center;
        background: rgba(248, 185, 75, 0.15);
        border-radius: 8rpx;
        padding: 4rpx 12rpx;

        .level-text {
          font-size: 20rpx;
          color: #a26616;
          margin-left: 4rpx;
        }
      }
    }

    .rating-tag {
      display: flex;
      align-items: center;

      .stars {
        display: flex;
        margin-right: 10rpx;

        .star-icon {
          font-size: 24rpx;
        }
      }

      .tag {
        font-size: 28rpx;
        color: #7934f6;
      }
    }
  }

  .product-sku {
    font-size: 26rpx;
    color: #aaaaaa;
    margin-bottom: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eval-content-text {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 1.5;
    word-break: break-all;
  }

  .eval-images {
    white-space: nowrap;

    .eval-images-wrap {
      display: inline-flex;
      gap: 16rpx;
    }

    .eval-img {
      width: 210rpx;
      height: 210rpx;
      border-radius: 12rpx;
      background-color: #f0f2f5;
      flex-shrink: 0;
    }
  }
}
</style>