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

<template>
  <view class="container">
    <view class="filter-section">
      <scroll-view scroll-x class="type-tabs">
        <view class="tab-row">
          <view
            v-for="item in typeList"
            :key="item.value"
            :class="['tab-item', currentType === item.value ? 'active' : '']"
            @click="onTypeChange(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </scroll-view>
      <scroll-view scroll-x class="domain-tabs">
        <view class="tab-row">
          <view
            v-for="item in domainList"
            :key="item.value"
            :class="['tab-item small', currentDomain === item.value ? 'active' : '']"
            @click="onDomainChange(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <scroll-view
      scroll-y
      class="product-list"
      @scrolltolower="onLoadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="loading && products.length === 0" class="loading-wrap">
        <text class="loading-text">加载中...</text>
      </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">
        <view
          v-for="item in products"
          :key="item.id"
          class="product-card"
          @click="goDetail(item.id)"
        >
          <image
            class="cover"
            :src="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">¥{{ item.price }}</text>
              <text v-if="item.memberPrice" class="member-price">会员¥{{ item.memberPrice }}</text>
            </view>
            <text class="vendor-name">{{ item.vendorName || '平台官方' }}</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>
    </scroll-view>
  </view>
</template>

<script>
import { productList } from '@/utils/api.js'

export default {
  data() {
    return {
      typeList: [
        { label: '全部', value: '' },
        { label: '活动', value: 'activity' },
        { label: '课程', value: 'course' },
        { label: '实物', value: 'physical' },
        { label: '数字', value: 'digital' },
        { label: '服务', value: 'service' }
      ],
      domainList: [
        { label: '全部', value: '' },
        { label: '行动', value: 'action' },
        { label: '心智', value: 'mind' },
        { label: '身体', value: 'body' },
        { label: '智慧', value: 'wisdom' },
        { label: '财富', value: 'wealth' }
      ],
      currentType: '',
      currentDomain: '',
      products: [],
      page: 1,
      size: 20,
      loading: false,
      loadingMore: false,
      refreshing: false,
      noMore: false
    }
  },
  onLoad() {
    this.loadProducts()
  },
  methods: {
    onTypeChange(value) {
      this.currentType = value
      this.page = 1
      this.products = []
      this.noMore = false
      this.loadProducts()
    },
    onDomainChange(value) {
      this.currentDomain = value
      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.currentType) {
        params.productType = this.currentType
      }
      if (this.currentDomain) {
        params.domain = this.currentDomain
      }
      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.page + 1
      this.loadingMore = true
      const params = {
        page: this.page,
        size: this.size
      }
      if (this.currentType) {
        params.productType = this.currentType
      }
      if (this.currentDomain) {
        params.domain = this.currentDomain
      }
      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/discover/product-detail/product-detail?id=' + id
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}
.filter-section {
  background: #fff;
  padding: 20rpx 0 10rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.type-tabs {
  white-space: nowrap;
  margin-bottom: 16rpx;
}
.tab-row {
  display: flex;
  padding: 0 20rpx;
}
.tab-item {
  display: inline-block;
  padding: 12rpx 28rpx;
  font-size: 28rpx;
  color: #666;
  margin-right: 16rpx;
  border-radius: 40rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}
.tab-item.small {
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  margin-right: 12rpx;
}
.tab-item.active {
  background: #F97316;
  color: #fff;
}
.product-list {
  flex: 1;
  height: calc(100vh - 200rpx);
}
.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;
}
</style>