cfc/cfc-frontend/components/DimensionProducts.vue

<template>
  <view>
    <view v-if="!loading && displayProducts.length === 0" class="empty-state">
      <text class="empty-tip">{{ emptyText }}</text>
    </view>
    <view v-else class="product-list">
      <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" />
        <view class="product-body">
          <text class="product-name">{{ 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>
          </view>
        </view>
      </view>
    </view>
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

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

export default {
  props: {
    // 兼容模式：父组件直接传入商品数组（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: {
    displayProducts: function() {
      return (this.products && this.products.length > 0 ? this.products : this.selfProducts).slice(0, 4)
    },
    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 = {
        limit: 4
      }
      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>
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-card {
  width: calc(25% - 12rpx);
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
.product-card:nth-child(4n) {
  margin-right: 0;
}
.product-img {
  width: 100%;
  height: 160rpx;
  background: #f0f0f0;
}
.product-body {
  padding: 8rpx 10rpx 12rpx;
}
.product-name {
  display: block;
  font-size: 22rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-row {
  display: flex;
  align-items: baseline;
}
.product-price {
  font-size: 24rpx;
  color: #F97316;
  font-weight: bold;
}
.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>