cfc/cfc-frontend/components/DimensionProductList.vue

<template>
  <view class="dimension-product-list">
    <view class="section-header">
      <text class="section-title">{{ title }}</text>
    </view>
    <view class="product-grid" v-if="products.length > 0">
      <view class="product-card" v-for="product in products" :key="product.id" @click="goProduct(product)">
        <image class="product-cover" :src="product.coverImage || '/static/default-product.png'" mode="aspectFill"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <view class="product-price-row">
            <text class="product-price">¥{{ (product.price / 100).toFixed(2) }}</text>
            <text class="product-reason" v-if="product.reason">{{ product.reason }}</text>
          </view>
          <view class="match-badge" v-if="product.matchScore">
            <text class="match-score">{{ product.matchScore }}分</text>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-text">{{ familyId ? '暂无推荐商品' : '登录后查看推荐商品' }}</text>
    </view>
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { getDimensionProducts, clickRepurchaseReminder } from '../utils/api.js'

export default {
  props: {
    dimensionCode: { type: String, required: true },
    familyId: { type: [Number, String], default: null },
    memberScores: { type: Object, default: function() { return {} } },
    title: { type: String, default: '为你推荐' }
  },
  data: function() {
    return {
      products: [],
      loading: false
    }
  },
  mounted: function() {
    // 无 familyId（未登录/未选择孩子）时不请求推荐接口，展示引导文案
    if (!this.familyId) {
      this.loading = false
      return
    }
    this.loadProducts()
  },
  methods: {
    loadProducts: function() {
      var self = this
      self.loading = true
      var params = {
        dimensionCode: self.dimensionCode,
        familyId: self.familyId,
        limit: 6
      }
      if (self.memberScores && Object.keys(self.memberScores).length > 0) {
        params.memberScores = self.memberScores
      }
      
      getDimensionProducts(params).then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.products = Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
      }).catch(function() {
        self.loading = false
      })
    },
    goProduct: function(product) {
      if (!product || !product.id) return

      if (product.source === 'repurchase' && product.id) {
        clickRepurchaseReminder(product.id).catch(function() {})
      }

      uni.navigateTo({
        url: '/pages/discover-detail/product-detail/product-detail?id=' + product.productId + '&from=dimension'
      })
    }
  }
}
</script>

<style scoped>
.dimension-product-list {
  margin: 20rpx 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.product-card {
  width: calc(50% - 10rpx);
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.product-cover {
  width: 100%;
  height: 240rpx;
  background: #f0f0f0;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.product-price {
  font-size: 28rpx;
  color: #F97316;
  font-weight: bold;
}

.product-reason {
  font-size: 22rpx;
  color: #999;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-badge {
  display: inline-block;
  background: linear-gradient(135deg, #6366F1, #818CF8);
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-top: 8rpx;
}

.match-score {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}

.empty-state {
  display: flex;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-text {
  font-size: 26rpx;
  color: #999;
}

.loading-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}
</style>