cfc/cfc-frontend/pages/shop/index/index.vue

<template>
  <view class="container">
    <!-- Level 1 分类：2列横排网格 -->
    <view class="cat-level1">
      <view
        v-for="cat in categories"
        :key="cat.id"
        :class="['cat1-item', currentCat1 && currentCat1.id === cat.id ? 'active' : '']"
        @click="onCat1Select(cat)"
      >
        <image v-if="cat.image" class="cat1-icon" :src="cat.image" mode="aspectFit" />
        <view v-else class="cat1-icon-placeholder">
          <text class="cat1-icon-text">{{ cat.name.substr(0, 1) }}</text>
        </view>
        <text class="cat1-name">{{ cat.name }}</text>
      </view>
    </view>

    <!-- Level 2 子分类：横向滚动chips -->
    <scroll-view
      v-if="currentCat1 && currentCat1.children && currentCat1.children.length"
      scroll-x
      enable-flex
      show-scrollbar="false"
      class="cat-level2-scroll"
    >
      <view class="cat2-chips">
        <view
          :class="['cat2-chip', !currentCat2 ? 'active' : '']"
          @click="onCat2Select(null)"
        >全部</view>
        <view
          v-for="child in currentCat1.children"
          :key="child.id"
          :class="['cat2-chip', currentCat2 && currentCat2.id === child.id ? 'active' : '']"
          @click="onCat2Select(child)"
        >{{ child.name }}</view>
      </view>
    </scroll-view>

    <!-- 商品列表 -->
    <scroll-view
      scroll-y
      class="product-list"
      @scrolltolower="onLoadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- Loading skeleton -->
      <view v-if="loading && products.length === 0" class="skeleton-grid">
        <view class="skeleton-card" v-for="n in 6" :key="n">
          <view class="skeleton-img"></view>
          <view class="skeleton-body">
            <view class="skeleton-line skeleton-title"></view>
            <view class="skeleton-line skeleton-price"></view>
            <view class="skeleton-line skeleton-vendor"></view>
          </view>
        </view>
      </view>
      <view v-else-if="products.length === 0" class="empty-wrap">
        <text class="empty-icon">📦</text>
        <text class="empty-text">暂无商品</text>
      </view>
      <view v-else class="grid fade-in">
        <view
          v-for="item in products"
          :key="item.id"
          class="product-card"
          @click="goDetail(item.id)"
        >
          <image
            class="cover"
            :src="item.image || item.coverImage || '/static/default-product.png'"
            mode="aspectFill"
          />
          <view class="card-body">
            <text class="product-name">{{ item.name }}</text>
            <view class="price-row">
              <text class="price">{{ formatPriceWithSymbol(item.price) }}</text>
              <text v-if="item.memberPrice" class="member-price">会员{{ formatPriceWithSymbol(item.memberPrice) }}</text>
            </view>
            <text class="vendor-name">{{ item.brandName || '平台官方' }}</text>
          </view>
        </view>
      </view>
      <view v-if="loadingMore" class="loading-more">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-if="noMore && products.length > 0" class="no-more">
        <text class="no-more-text">— 没有更多了 —</text>
      </view>
      <view v-if="!isLoggedIn" class="login-hint-bar">
        <text class="login-hint-text">🔒 登录查看全部商品和会员价</text>
      </view>
      <view class="bottom-spacer"></view>
    </scroll-view>


  </view>
</template>

<script>
import { goodsCategory, productList } from '@/utils/api.js'
export default {
  data() {
    return {
      categories: [],
      currentCat1: null,
      currentCat2: null,
      products: [],
      page: 1,
      size: 20,
      loading: false,
      loadingMore: false,
      refreshing: false,
      noMore: false,
      isLoggedIn: false
    }
  },
  onLoad() {
    this.isLoggedIn = !!uni.getStorageSync('token')
    this.loadCategories()
    this.loadProducts()
  },
  onShow() {
    this.isLoggedIn = !!uni.getStorageSync('token')
  },
  methods: {
    loadCategories() {
      goodsCategory('0').then(res => {
        if (res.code === 200 && res.data) {
          this.categories = res.data || []
        }
      }).catch(() => {})
    },
    onCat1Select(cat) {
      if (this.currentCat1 && this.currentCat1.id === cat.id) return
      this.currentCat1 = cat
      this.currentCat2 = null
      this.page = 1
      this.products = []
      this.noMore = false
      this.loadProducts()
    },
    onCat2Select(cat) {
      this.currentCat2 = cat
      this.page = 1
      this.products = []
      this.noMore = false
      this.loadProducts()
    },
    loadProducts() {
      if (this.loading) return
      this.loading = true
      const params = { page: this.page, size: this.size }
      if (this.currentCat2) {
        params.categoryId = this.currentCat2.id
      } else if (this.currentCat1) {
        params.categoryId = this.currentCat1.id
      }
      productList(params).then(res => {
        this.loading = false
        this.refreshing = false
        if (res.code === 200 && res.data) {
          const records = res.data.records || []
          if (this.page === 1) {
            this.products = records
          } else {
            this.products = this.products.concat(records)
          }
          const total = res.data.total || 0
          this.noMore = this.products.length >= total
        }
      }).catch(() => {
        this.loading = false
        this.refreshing = false
      })
    },
    onRefresh() {
      this.refreshing = true
      this.page = 1
      this.noMore = false
      this.loadProducts()
    },
    onLoadMore() {
      if (this.noMore || this.loadingMore) return
      this.page++
      this.loadingMore = true
      const params = { page: this.page, size: this.size }
      if (this.currentCat2) {
        params.categoryId = this.currentCat2.id
      } else if (this.currentCat1) {
        params.categoryId = this.currentCat1.id
      }
      productList(params).then(res => {
        this.loadingMore = false
        if (res.code === 200 && res.data) {
          const records = res.data.records || []
          this.products = this.products.concat(records)
          const total = res.data.total || 0
          this.noMore = this.products.length >= total
        }
      }).catch(() => {
        this.loadingMore = false
      })
    },
    goDetail(id) {
      uni.navigateTo({ url: '/pages/shop/detail/detail?id=' + id })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}
/* ==================== 分类布局 ==================== */
/* Level 1 分类：2列横排网格 */
.cat-level1 {
  display: flex;
  flex-wrap: wrap;
  padding: 16rpx 16rpx 8rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}
.cat1-item {
  width: 50%;
  box-sizing: border-box;
  padding: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
}
.cat1-item.active {
  background: rgba(249, 115, 22, 0.08);
}
.cat1-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-bottom: 6rpx;
  background: #f5f5f5;
}
.cat1-icon-placeholder {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-bottom: 6rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat1-icon-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}
.cat1-name {
  font-size: 24rpx;
  color: #333;
  max-width: 140rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat1-item.active .cat1-name {
  color: #F97316;
  font-weight: bold;
}

/* Level 2 子分类：横向滚动chips */
.cat-level2-scroll {
  background: #fff;
  white-space: nowrap;
  padding: 12rpx 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.cat2-chips {
  display: inline-flex;
  gap: 12rpx;
  padding: 0 4rpx;
}
.cat2-chip {
  display: inline-block;
  padding: 8rpx 24rpx;
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  border-radius: 30rpx;
  flex-shrink: 0;
}
.cat2-chip.active {
  background: #F97316;
  color: #fff;
}

/* ==================== 商品列表 ==================== */
.product-list {
  flex: 1;
  height: calc(100vh - 220rpx);
}
.login-hint-bar {
  text-align: center;
  padding: 20rpx;
  background: #fef9e7;
  border-top: 1rpx solid #f0e6c0;
}
.login-hint-text {
  font-size: 24rpx;
  color: #b8860b;
}
.bottom-spacer {
  height: 120rpx;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-between;
}
.product-card {
  width: 49%;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.cover {
  width: 100%;
  height: 320rpx;
  background: #f0f0f0;
}
.card-body {
  padding: 16rpx;
}
.product-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  lines: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 12rpx;
}
.price-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}
.price {
  font-size: 32rpx;
  color: #F97316;
  font-weight: bold;
  margin-right: 12rpx;
}
.member-price {
  font-size: 22rpx;
  color: #999;
}
.vendor-name {
  font-size: 22rpx;
  color: #999;
}
.loading-wrap,
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 26rpx;
  color: #999;
}
.empty-icon {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.loading-more,
.no-more {
  text-align: center;
  padding: 30rpx;
}
.loading-text {
  font-size: 24rpx;
  color: #999;
}
.no-more-text {
  font-size: 24rpx;
  color: #ccc;
}
/* Loading skeleton grid */
.skeleton-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-between;
}
.skeleton-card {
  width: 49%;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}
.skeleton-img {
  width: 100%;
  height: 320rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-body {
  padding: 16rpx;
}
.skeleton-line {
  height: 24rpx;
  border-radius: 6rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-title { width: 70%; margin-bottom: 12rpx; }
.skeleton-price { width: 40%; margin-bottom: 8rpx; }
.skeleton-vendor { width: 50%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Product grid fade-in */
.grid.fade-in {
  animation: gridFadeIn 0.3s ease-out;
}
@keyframes gridFadeIn {
  from { opacity: 0; transform: translateY(10rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>