cfc/cfc-frontend/components/DimensionProducts.vue

<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">🛍️ {{ title }}</text>
      <text class="section-more" v-if="showMore" @click="$emit('moreProducts')">更多 ›</text>
    </view>
    <view v-if="hasFamily">
      <view v-if="!loading && displayProducts.length === 0" class="empty-state">
        <text class="empty-tip">{{ emptyText }}</text>
      </view>
      <view class="product-list" v-if="displayProducts.length > 0">
        <view class="product-card" v-for="prod in displayProducts" :key="prod.id" @click="onProductClick(prod)">
          <image class="product-img" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill" />
          <text class="product-name line-clamp-2">{{ prod.name }}</text>
          <view class="price-row">
            <text class="product-price" v-if="prod.priceLabel">{{ prod.priceLabel }}</text>
            <text class="product-price" v-else-if="prod.price">{{ formatPriceWithSymbol(prod.price) }}</text>
            <text class="product-price" v-else>免费</text>
            <text class="product-reason" v-if="prod.reason">{{ prod.reason }}</text>
          </view>
          <view class="match-badge" v-if="prod.matchScore">
            <text class="match-score">{{ prod.matchScore }}分</text>
          </view>
        </view>
      </view>
      <view class="loading-state" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>
    </view>
    <view v-else>
      <FamilyEmptyState type="card" />
    </view>
  </view>
</template>

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

export default {
  props: {
    dimensionCode: { type: String, default: '' },
    // 兼容模式：父组件直接传入商品数组（member-detail 等页面）
    products: { type: Array, default: function() { return [] } },
    // 自加载模式：传入 familyId 后组件内部调用 getDimensionProducts
    familyId: { type: [Number, String], default: null },
    isLoggedIn: { type: Boolean, default: false },
    title: { type: String, default: '推荐商品' },
    showMore: { type: Boolean, default: true }
  },
  data: function() {
    return {
      selfProducts: [],
      loading: false
    }
  },
  computed: {
    hasFamily: function() {
      // 应急修复（2026-08-07，对齐 body/index.vue）：store.familyId 在 familyId 后端派生改造后
      // 不再被写入，hasFamily 恒为 false 导致商品区被 v-else 空态吞掉。
      // 改为基于组件自身数据判断：有 familyId（自加载模式）或父组件传入商品（兼容模式）
      // 即认为有家庭，store getter 仅作兜底。
      if (this.familyId) {
        return true
      }
      if (this.products && this.products.length > 0) {
        return true
      }
      return this.$store.getters.hasFamily
    },
    displayProducts: function() {
      return this.products && this.products.length > 0 ? this.products : this.selfProducts
    },
    emptyText: function() {
      // 有 familyId（已登录且选中孩子）但推荐接口无数据
      if (this.familyId) {
        return '暂无推荐商品'
      }
      return this.isLoggedIn ? '暂无商品' : '登录后查看更多商品'
    }
  },
  mounted: function() {
    // 自加载模式：有 familyId 且父组件未传入 products 时才请求推荐接口
    if (this.familyId && (!this.products || this.products.length === 0)) {
      this.loadDimensionProducts()
    }
  },
  watch: {
    familyId: function(val) {
      // 切换孩子/登录态变化时重新加载
      if (val && (!this.products || this.products.length === 0)) {
        this.loadDimensionProducts()
      }
    }
  },
  methods: {
    loadDimensionProducts: function() {
      var self = this
      self.loading = true
      var params = {
        dimensionCode: self.dimensionCode,
        limit: 6
      }
      getDimensionProducts(params).then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.selfProducts = Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
      }).catch(function() {
        self.loading = false
        self.selfProducts = []
      })
    },
    onProductClick: function(prod) {
      if (!prod || !prod.id) return
      // 复购提醒追踪（推荐商品点击行为上报）
      if (prod.source === 'repurchase' && prod.id) {
        clickRepurchaseReminder(prod.id).catch(function() {})
      }
      this.$emit('productClick', prod)
    },
    formatPriceWithSymbol: function(price) {
      if (price == null) return '免费'
      return '¥' + (Number(price) / 100).toFixed(2)
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
.section {
  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;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-card {
  width: calc(50% - 10rpx);
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.product-card:nth-child(2n) {
  margin-right: 0;
}
.product-img {
  width: 100%;
  height: 240rpx;
  background: #f0f0f0;
}
.product-name {
  font-size: 26rpx;
  color: #333;
  padding: 12rpx 16rpx 0;
}
.price-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 16rpx 16rpx;
}
.product-price {
  font-size: 28rpx;
  color: #F97316;
  font-weight: bold;
}
.product-reason {
  font-size: 20rpx;
  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: 0 16rpx 16rpx;
}
.match-score {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.empty-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}
.empty-tip {
  font-size: 24rpx;
  color: #999;
}
.loading-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}
.loading-text {
  font-size: 24rpx;
  color: #999;
}
</style>