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', layout === 'mall' ? 'product-list-mall' : '']">
      <view :class="['product-card', layout === 'mall' ? 'product-card-mall' : '']" v-for="prod in displayProducts" :key="prod.id" @click="onProductClick(prod)">
        <image class="product-img" :class="layout === 'mall' ? 'product-img-mall' : ''" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill"  lazy-load />
        <view class="product-body" :class="layout === 'mall' ? 'product-body-mall' : ''">
          <text class="product-name" :class="layout === 'mall' ? 'product-name-mall' : ''">{{ prod.name }}</text>
          <view class="price-row">
            <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-if="prod.priceLabel">{{ prod.priceLabel }}</text>
            <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-else-if="prod.price">{{ formatPriceWithSymbol(prod.price) }}</text>
            <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-else>免费</text>
          </view>
        </view>
      </view>
      <view v-if="loading" class="loading-state">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-if="loadingMore" class="loading-more">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-if="noMore && displayProducts.length > 0" class="no-more">
        <text class="no-more-text">— 没有更多了 —</text>
      </view>
    </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 },
    dimensionCode: { type: String, default: '' },
    title: { type: String, default: '推荐商品' },
    showMore: { type: Boolean, default: true },
    // 'compact' 保持原始 4 列小卡片（member-detail 等页面）；'mall' 两列大卡片（首页）
    layout: { type: String, default: 'compact' }
  },
  data: function() {
    return {
      selfProducts: [],
      loading: false,
      loadingMore: false,
      page: 1,
      size: 4,
      noMore: false
    }
  },
  computed: {
    displayProducts: function() {
      // 兼容模式：父组件传入 products 时原样展示（member-detail 等页面已自行截断）
      return (this.products && this.products.length > 0 ? this.products : this.selfProducts)
    },
    emptyText: function() {
      // 有 familyId（已登录且选中孩子）但推荐接口无数据
      if (this.familyId) {
        return '暂无推荐商品'
      }
      return this.isLoggedIn ? '暂无商品' : '登录后查看更多商品'
    }
  },
  mounted: function() {
    // 自加载模式：已登录且父组件未传入 products 时才请求推荐接口
    // （familyId 由后端从 JWT 派生，前端无需传入）
    if (this.isLoggedIn && (!this.products || this.products.length === 0)) {
      this.loadDimensionProducts()
    }
  },
  watch: {
    familyId: function() {
      // 切换孩子/登录态变化时重新加载
      if (this.isLoggedIn && (!this.products || this.products.length === 0)) {
        this.loadDimensionProducts()
      }
    },
    isLoggedIn: function(val) {
      // 登录后触发加载
      if (val && (!this.products || this.products.length === 0)) {
        this.loadDimensionProducts()
      }
    }
  },
  methods: {
    loadDimensionProducts: function() {
      var self = this
      self.page = 1
      self.noMore = false
      self.loading = true
      self.loadDimensionProductsByPage(self.page).then(function(list) {
        self.loading = false
        self.selfProducts = list
        if (list.length < self.size) self.noMore = true
      }).catch(function() {
        self.loading = false
        self.selfProducts = []
      })
    },
    // 供父页面 onReachBottom / scrolltolower 调用的加载更多
    loadMore: function() {
      var self = this
      if (self.loading || self.loadingMore || self.noMore) return
      // 兼容模式（父组件传入 products）不自加载
      if (self.products && self.products.length > 0) return
      self.loadingMore = true
      var nextPage = self.page + 1
      self.loadDimensionProductsByPage(nextPage).then(function(list) {
        self.loadingMore = false
        self.page = nextPage
        self.selfProducts = self.selfProducts.concat(list)
        if (list.length < self.size) self.noMore = true
      }).catch(function() {
        self.loadingMore = false
      })
    },
    loadDimensionProductsByPage: function(page) {
      var self = this
      var params = {
        page: page,
        size: self.size
      }
      if (self.dimensionCode) {
        params.dimensionCode = self.dimensionCode
      }
      return getDimensionProducts(params).then(function(res) {
        if (res.code === 200 && res.data) {
          return Array.isArray(res.data) ? res.data : (res.data.records || [])
        }
        return []
      })
    },
    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) {
      if (!path || path === 'null' || path === 'undefined' || path === '/null') return ''
      var s = String(path).trim()
      if (!s || s === 'null' || s === '/null') return ''
      if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) return s
      return config.API_BASE_URL + (s.charAt(0) === '/' ? s : '/' + s)
    }
  }
}
</script>

<stylescoped lang="scss">
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-card {
  width: calc(25% - 12rpx);
  background: $app-surface;
  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: $facade-fill;
}
.product-body {
  padding: 8rpx 10rpx 12rpx;
}
.product-name {
  display: block;
  font-size: 22rpx;
  color: $facade-text-strong;
  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: $brand-primary;
  font-weight: bold;
}
/* ===== 商城样式（首页 layout="mall"）===== */
.product-list-mall {
  justify-content: space-between;
}
.product-card-mall {
  width: 49%;
  border-radius: 16rpx;
  margin-right: 0;
}
.product-img-mall {
  height: 320rpx;
}
.product-body-mall {
  padding: 16rpx 16rpx 14rpx;
}
.product-name-mall {
  display: -webkit-box;
  font-size: 26rpx;
  line-height: 1.4;
  margin-bottom: 8rpx;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.product-price-mall {
  font-size: 28rpx;
}
.empty-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
}
.empty-tip {
  font-size: 24rpx;
  color: $facade-text-muted;
}
.loading-state {
  display: flex;
  justify-content: center;
  padding: 40rpx 0;
  width: 100%;
}
.loading-more {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  width: 100%;
}
.loading-text {
  font-size: 24rpx;
  color: $facade-text-muted;
}
.no-more {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  width: 100%;
}
.no-more-text {
  font-size: 22rpx;
  color: $facade-text-ghost;
}
</style>