sqxp/sqxp-wx/pages/client/home/home.vue

<template>
  <!-- 购物车条勿放在 inquiry-page 内：父级 overflow:hidden 会裁切角标；且 bottom 须与 tabBar 对齐 -->
  <view class="home-root client-theme">
  <view class="inquiry-page">
    <view v-if="isLoading" class="state">
      <ClientSkeleton variant="hero-list" :rows="3" />
    </view>
    <view v-else class="content-wrap">
      <!-- 顶栏：仅渐变背景 + 配送行 + 搜索条（与 sanqiang-client-ui-demo.html .top 一致） -->
      <view class="filter-top-wrap sq-hero-header">
        <view class="hero-top-main">
          <view class="hero-top-text">
            <text class="hero-brand">叁强鲜配</text>
            <text class="hero-region-line">{{ deliveryLineLeft }}</text>
          </view>
          <ClientImageLoader
            class="hero-top-logo"
            :src="IMG_LOGO_WATERMARK"
            mode="aspectFit"
          />
        </view>
        <view class="search-bar">
          <input
            v-model="keyword"
            class="search-input"
            type="text"
            placeholder="请输入商品名称搜索"
            placeholder-class="search-placeholder"
            confirm-type="search"
            @confirm="onSearchClick"
          />
          <text class="search-action" @click="onSearchClick">搜索</text>
        </view>
      </view>

      <!-- 一级分类及以下在灰底区域，独立白卡片（与 demo .section + .first-level 一致） -->
      <view class="category-section">
        <view class="section-head">
          <text class="section-title">商品分类</text>
        </view>

        <view class="first-category-wrap">
          <swiper
            class="first-category-swiper"
            :current="firstCategorySwiperIndex"
            :circular="false"
            :indicator-dots="false"
            @change="onFirstCategorySwiperChange"
          >
            <swiper-item v-for="(page, pageIdx) in firstCategoryPages" :key="`category-page-${pageIdx}`">
              <view class="first-category-grid">
                <view
                  v-for="cat in page"
                  :key="cat.id"
                  class="first-category-card"
                  :class="{ active: selectedFirstCategoryId === cat.id }"
                  hover-class="first-category-card--hover"
                  :hover-stay-time="120"
                  @click="handleFirstCategoryClick(cat.id)"
                >
                  <ClientImageLoader
                    class="first-category-image"
                    :src="cat.imageUrl || DEFAULT_PLACEHOLDER_IMAGE_URL"
                    mode="aspectFill"
                    radius="24rpx"
                  />
                  <text class="first-category-name">{{ cat.name }}</text>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>

        <view v-if="firstCategoryPages.length > 0" class="first-level-indicator">
          <view
            v-for="(_, idx) in firstCategoryPages"
            :key="`dot-${idx}`"
            class="indicator-dot"
            :class="{ active: firstCategorySwiperIndex === idx }"
            @click="goFirstCategorySwiperPage(idx)"
          />
        </view>
      </view>

      <view class="product-layout">
        <view class="product-body">
          <scroll-view
            scroll-y
            class="category-pane"
            :show-scrollbar="true"
            :lower-threshold="60"
            @scrolltolower="onCategoryScrollToLower"
          >
            <view class="category-scroll-inner">
              <view
                v-for="cat in displaySidebarRows"
                :key="cat.id"
                class="category-item"
                :class="{ active: selectedSecondCategoryId === cat.id }"
                hover-class="category-item--hover"
                :hover-stay-time="120"
                @click="selectedSecondCategoryId = cat.id"
              >
                {{ cat.name }}
              </view>
              <view v-if="sidebarLoading && sidebarRows.length === 0" class="pane-footer-tip">加载中...</view>
              <view v-else-if="sidebarHasMore" class="pane-footer-tip">上拉加载更多分类</view>
            </view>
          </scroll-view>

          <view class="goods-pane">
            <scroll-view
              scroll-y
              class="goods-scroll"
              :show-scrollbar="true"
              :lower-threshold="80"
              @scrolltolower="onGoodsScrollToLower"
            >
              <view class="goods-scroll-inner">
                <view
                  v-for="product in products"
                  :key="product.id"
                  class="goods-card"
                  hover-class="goods-card--pressed"
                  :hover-stay-time="120"
                  @click="goProductView(product.id)"
                >
                  <ClientImageLoader
                    class="goods-image"
                    :src="product.imageUrl || IMG_DEFAULT_PRODUCT"
                    mode="aspectFill"
                    radius="16rpx"
                  />
                  <view class="goods-main">
                    <text class="goods-name">{{ product.name || '-' }}</text>
                    <text class="goods-spec">{{ formatMeasureText(product.measureValue, product.unitName) }}</text>
                    <view class="bottom-row">
                      <text class="goods-price">¥{{ formatPrice(product.price || 0) }}</text>
                      <view class="bottom-row-actions">
                        <view v-if="getCartQuantity(product.id) === 0" class="add-btn" @click.stop="addToCart(product)">
                          <text class="add-btn-plus">+</text>
                        </view>
                        <view v-else class="quantity-control" @click.stop>
                          <view class="qty-btn" @click.stop="updateQuantity(product.id, -1)">
                            <text>-</text>
                          </view>
                          <text class="qty-num">{{ getCartQuantity(product.id) }}</text>
                          <view class="qty-btn" @click.stop="updateQuantity(product.id, 1)">
                            <text>+</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <view v-if="products.length === 0 && !productsLoadingMore" class="empty-list-tip">暂无匹配商品</view>
                <view v-if="productsLoadingMore" class="pane-footer-tip">加载中...</view>
                <view v-else-if="products.length > 0 && !productHasMore" class="pane-footer-tip">没有更多了</view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="cart-bar" @click="goToCart">
    <view class="cart-inner">
      <view class="cart-left">
        <view class="cart-count">
          <text>{{ cartStore.totalCount > 99 ? '99+' : cartStore.totalCount }}</text>
        </view>
        <view class="cart-text-col">
          <text class="cart-items-label">已选商品</text>
          <text class="cart-total-money">¥{{ formatPrice(cartStore.totalAmount) }}</text>
        </view>
      </view>
      <view class="cart-settle">
        <text>去结算</text>
      </view>
    </view>
  </view>

  <ProductDetailOverlay
    :show="showProductOverlay"
    :product-id="overlayProductId"
    @close="closeProductOverlay"
  />
  <!-- #ifdef H5 -->
  <ClientTabBar active="home" />
  <!-- #endif -->
  </view>
</template>



<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import { TOKEN_KEY } from '@/config/api'
import { request, parseResponseJson } from '@/utils/request'
import { formatYuan } from '@/utils/format'
import ProductDetailOverlay from '@/components/client/product-detail-overlay.vue'
import ClientTabBar from '@/components/client/client-tab-bar.vue'
import ClientSkeleton from '@/components/client/client-skeleton.vue'
import ClientImageLoader from '@/components/client/client-image-loader.vue'
import { DEFAULT_PLACEHOLDER_IMAGE_URL, IMG_DEFAULT_PRODUCT, IMG_LOGO_WATERMARK } from '@/utils/staticAsset'

// Store
const userStore = useUserStore()
const cartStore = useCartStore()

const SIDEBAR_PAGE_SIZE = 30
const ROOT_CATEGORY_PAGE_SIZE = 20
const PRODUCT_PAGE_SIZE = 20

// 状态（一级分类由接口分页拉全；左侧栏由 sidebar 接口分页：顶为「全部」时为全部+一级，顶为某一级时为全部+二级，首行展示名由前端替换为一级名称）
const rootCategoryList = ref([])
const sidebarRows = ref([])
const sidebarLoading = ref(false)
const sidebarHasMore = ref(false)
const nextSidebarPage = ref(1)
const products = ref([])
const selectedFirstCategoryId = ref('all')
const selectedSecondCategoryId = ref('all')
const keyword = ref('')
// 初始为 true：避免先渲染 scroll-view 再被请求置为 loading 时卸载/重挂，
// H5 上会触发 uni scroll-view 内部 _scrollTopChanged 对 null 设 scrollTop 的报错。
const isLoading = ref(true)
const productsLoadingMore = ref(false)
const nextProductPage = ref(1)
const productHasMore = ref(true)
const initialized = ref(false)

// 商品详情覆盖弹窗
const showProductOverlay = ref(false)
const overlayProductId = ref('')

const firstCategoryCards = computed(() => {
  const mapped = rootCategoryList.value.map((c) => ({
    id: c.id,
    name: c.name,
    imageUrl: c.imageUrl || DEFAULT_PLACEHOLDER_IMAGE_URL
  }))
  return [{ id: 'all', name: '全部', imageUrl: DEFAULT_PLACEHOLDER_IMAGE_URL }, ...mapped]
})

/** 与 mobile-ui demo 一致：每页 5 列 × 2 行 = 10 个 */
const FIRST_CATEGORY_PAGE_SIZE = 10

const firstCategoryPages = computed(() => {
  const pages = []
  for (let i = 0; i < firstCategoryCards.value.length; i += FIRST_CATEGORY_PAGE_SIZE) {
    pages.push(firstCategoryCards.value.slice(i, i + FIRST_CATEGORY_PAGE_SIZE))
  }
  return pages
})

const firstCategorySwiperIndex = ref(0)

const deliveryLineLeft = computed(() => {
  const name = userStore.userInfo?.regionName?.trim()
  return name ? `配送区域：${name}` : '配送区域：请选择区域'
})

function onFirstCategorySwiperChange(e) {
  const cur = e?.detail?.current
  if (typeof cur === 'number') firstCategorySwiperIndex.value = cur
}

function goFirstCategorySwiperPage(index) {
  firstCategorySwiperIndex.value = index
}

/** 左侧栏展示：顶为「全部」时为接口数据（全部+一级）；顶为某一级时首行显示该一级名称，不显示「全部」文案（筛选用 id 仍为 all） */
const displaySidebarRows = computed(() => {
  const rows = sidebarRows.value
  if (!rows.length) return rows
  if (selectedFirstCategoryId.value === 'all') return rows
  const firstMeta = firstCategoryCards.value.find((c) => c.id === selectedFirstCategoryId.value)
  const firstName = firstMeta?.name || '未分类'
  const head = rows[0]
  if (head && head.id === 'all') {
    return [{ id: 'all', name: firstName }, ...rows.slice(1)]
  }
  return rows
})

/** 与后端 list_products 的 categoryId / rootCategoryId 约定一致 */
function buildProductRequestData(page) {
  const f = selectedFirstCategoryId.value
  const s = selectedSecondCategoryId.value
  const data = {
    page,
    pageSize: PRODUCT_PAGE_SIZE
  }
  const kw = keyword.value.trim()
  if (kw) {
    data.keyword = kw
  }
  if (f === 'all') {
    if (s !== 'all') {
      data.rootCategoryId = s
    }
  } else if (s === 'all') {
    data.rootCategoryId = f
  } else {
    data.categoryId = s
  }
  return data
}

async function fetchProductPage(page) {
  const res = await request({
    url: '/mini/client/products',
    method: 'GET',
    data: buildProductRequestData(page)
  })
  const body = parseResponseJson(res)
  if (body.code !== 200) {
    return { list: [], totalPages: 0 }
  }
  const payload = body.data || {}
  const list = payload.list || []
  const totalPages = Number(payload.totalPages) || 0
  return { list, totalPages }
}

async function reloadProducts() {
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token) {
    products.value = []
    productHasMore.value = false
    return
  }
  productsLoadingMore.value = true
  nextProductPage.value = 1
  productHasMore.value = true
  products.value = []
  try {
    const { list, totalPages } = await fetchProductPage(1)
    products.value = list
    productHasMore.value = totalPages > 1
    nextProductPage.value = 2
  } catch (error) {
    console.error('获取商品失败:', error)
    productHasMore.value = false
  } finally {
    productsLoadingMore.value = false
  }
}

async function loadMoreProducts() {
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token || productsLoadingMore.value || !productHasMore.value) return
  productsLoadingMore.value = true
  const page = nextProductPage.value
  try {
    const { list, totalPages } = await fetchProductPage(page)
    if (list.length) {
      products.value = [...products.value, ...list]
    }
    productHasMore.value = page < totalPages
    if (productHasMore.value) {
      nextProductPage.value = page + 1
    }
  } catch (error) {
    console.error('加载更多商品失败:', error)
  } finally {
    productsLoadingMore.value = false
  }
}

function onGoodsScrollToLower() {
  void loadMoreProducts()
}

async function loadAllRootCategories() {
  rootCategoryList.value = []
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token) return
  let page = 1
  try {
    while (true) {
      const res = await request({
        url: '/mini/client/product-categories/first-level',
        method: 'GET',
        data: { page, pageSize: ROOT_CATEGORY_PAGE_SIZE }
      })
      const body = parseResponseJson(res)
      if (body.code !== 200) break
      const d = body.data || {}
      const list = d.list || []
      for (const c of list) {
        rootCategoryList.value.push({
          id: c.id,
          name: c.name,
          imageUrl: c.imageUrl || ''
        })
      }
      const totalPages = Number(d.totalPages) || 0
      if (page >= totalPages) break
      page += 1
    }
  } catch (error) {
    console.error('加载一级分类失败:', error)
  }
}

async function reloadSidebar() {
  sidebarRows.value = []
  nextSidebarPage.value = 1
  sidebarHasMore.value = true
  await loadSidebarPage(true)
}

async function loadSidebarPage(isFirst) {
  if (sidebarLoading.value) return
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token) return
  const page = isFirst ? 1 : nextSidebarPage.value
  if (!isFirst && !sidebarHasMore.value) return
  sidebarLoading.value = true
  try {
    const res = await request({
      url: '/mini/client/product-categories/sidebar',
      method: 'GET',
      data: {
        firstCategoryId: selectedFirstCategoryId.value,
        page,
        pageSize: SIDEBAR_PAGE_SIZE
      }
    })
    const body = parseResponseJson(res)
    if (body.code !== 200) return
    const d = body.data || {}
    const list = d.list || []
    if (isFirst) {
      sidebarRows.value = list
      nextSidebarPage.value = 2
    } else {
      sidebarRows.value = [...sidebarRows.value, ...list]
      nextSidebarPage.value = page + 1
    }
    const totalPages = Number(d.totalPages) || 0
    sidebarHasMore.value = page < totalPages
  } finally {
    sidebarLoading.value = false
  }
}

function onCategoryScrollToLower() {
  void loadSidebarPage(false)
}

let keywordDebounce = null
watch(keyword, () => {
  if (keywordDebounce) clearTimeout(keywordDebounce)
  keywordDebounce = setTimeout(() => {
    void reloadProducts()
  }, 350)
})

watch([selectedFirstCategoryId, selectedSecondCategoryId], () => {
  void reloadProducts()
})

watch(selectedFirstCategoryId, () => {
  void reloadSidebar()
})

watch(
  () => firstCategoryPages.value.length,
  () => {
    firstCategorySwiperIndex.value = 0
  }
)

function handleFirstCategoryClick(categoryId) {
  selectedFirstCategoryId.value = categoryId
  selectedSecondCategoryId.value = 'all'
}

// 添加到购物车
async function addToCart(product) {
  await cartStore.addToCart(product, 1)
}

// 商品数量变化
async function updateQuantity(productId, delta) {
  const cartItem = cartStore.items.find(item => item.productId === productId)
  if (cartItem) {
    const newQuantity = cartItem.quantity + delta
    if (newQuantity <= 0) {
      await cartStore.removeItem(cartItem.id)
    } else {
      await cartStore.updateQuantity(cartItem.id, newQuantity)
    }
  } else {
    const product = products.value.find(p => p.id === productId)
    if (product && delta > 0) {
      await cartStore.addToCart(product, delta)
    }
  }
}

// 获取购物车商品数量
function getCartQuantity(productId) {
  const item = cartStore.items.find(i => i.productId === productId)
  return item?.quantity || 0
}

// 跳转到购物车（tabBar 页须用 switchTab，不能用 navigateTo）
function goToCart() {
  uni.switchTab({ url: '/pages/client/cart/cart' })
}

// 跳转到个人中心（Tab 页需 switchTab）
function goToProfile() {
  uni.switchTab({ url: '/pages/client/profile/profile' })
}

function onSearchClick() {
  uni.hideKeyboard && uni.hideKeyboard()
  void reloadProducts()
}

function formatPrice(price) {
  return formatYuan(price)
}

function formatMeasureText(measureValue, unitName) {
  const unitText = (unitName || '').trim()
  if (measureValue == null || measureValue === '') {
    return unitText ? `- ${unitText}` : '-'
  }
  const num = Number(measureValue)
  if (!Number.isNaN(num)) {
    const measureText = String(num).replace(/\.?0+$/, '')
    return unitText ? `${measureText} ${unitText}` : measureText
  }
  const measureText = String(measureValue).trim()
  return unitText ? `${measureText} ${unitText}` : measureText || '-'
}

function goProductView(productId) {
  if (!productId) return
  overlayProductId.value = productId
  showProductOverlay.value = true
}

function closeProductOverlay() {
  showProductOverlay.value = false
}

// 初始化
onMounted(async () => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    isLoading.value = false
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    isLoading.value = false
    uni.showToast({ title: '请使用客户账号登录', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1500)
    return
  }
  isLoading.value = true
  try {
    await Promise.all([loadAllRootCategories(), cartStore.fetchCart(), reloadSidebar()])
    await reloadProducts()
    initialized.value = true
  } finally {
    isLoading.value = false
  }
})

onShow(() => {
  if (!initialized.value) return
  if (!userStore.isLoggedIn || !userStore.isClient) return
  void cartStore.fetchCart()
  void reloadProducts()
})
</script>



<style lang="scss">
/* 仅影响当前页：高度随 tab 内容区，禁止页面级纵向滚动（不写全局 body overflow，避免污染其它路由） */
page {
  height: 100%;
  overflow: hidden;
  background-color: #f5f8f7;
}

/* input placeholder-class 在部分端需非 scoped 才能命中 */
.search-placeholder {
  color: #8aa39a;
}
</style>

<style lang="scss" scoped>
.home-root {
  position: relative;
  width: 100%;
  min-height: 100%;
  /* 底部固定购物车条占位：按实际条高+离底间距预留，避免小屏遮挡最后一张商品卡片 */
  --home-goods-scroll-pad: calc(360rpx + constant(safe-area-inset-bottom));
  --home-goods-scroll-pad: calc(360rpx + env(safe-area-inset-bottom, 0px));
}

/* #ifdef H5 */
.home-root {
  /* H5 的 cart-bar 会叠加 --window-bottom 与额外偏移，需要更大的滚动底部留白 */
  --home-goods-scroll-pad: calc(420rpx + constant(safe-area-inset-bottom));
  --home-goods-scroll-pad: calc(420rpx + env(safe-area-inset-bottom, 0px));
}
/* #endif */

/* #ifdef H5 */
/* 与 cart 等 tab 页一致：底部用 --window-bottom，避免手写 50px 与 tabBar 实际高度不一致产生缝 */
.inquiry-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--window-bottom, calc(50px + env(safe-area-inset-bottom, 0px)));
  width: 100%;
  z-index: 1;
  min-height: 0;
  background: var(--c-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* #endif */

/* #ifndef H5 */
.inquiry-page {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: var(--c-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* #endif */

.state {
  text-align: center;
  color: var(--c-muted);
  padding: 40rpx;
}

.content-wrap {
  flex: 1;
  min-height: 0;
  /* demo .section 水平 16px → 32rpx */
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 对齐 mobile-ui/sanqiang-client-ui-demo.html .top */
.filter-top-wrap {
  flex-shrink: 0;
  margin: 0 -32rpx 0;
}

.hero-top-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.hero-top-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-brand {
  color: #ffffff;
  font-size: 48rpx;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.5rpx;
  margin-bottom: 12rpx;
}

.hero-region-line {
  color: #ffffff;
  font-size: 28rpx;
  line-height: 1.35;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 与供应商首页 header-watermark 同源素材，置于顶栏右侧底部对齐 */
.hero-top-logo {
  flex-shrink: 0;
  width: 168rpx;
  height: 168rpx;
  opacity: 0.4;
  pointer-events: none;
}

/* demo .search：白底圆角条 + 占位灰绿字 */
.search-bar {
  display: flex;
  align-items: center;
  height: 72rpx;
  background: #ffffff;
  border: 1rpx solid #d9e9e1;
  border-radius: 36rpx;
  padding: 0 8rpx 0 24rpx;
  box-sizing: border-box;
}

.search-input {
  flex: 1;
  min-width: 0;
  height: 72rpx;
  font-size: 28rpx;
  color: var(--c-text);
  background: transparent;
  border: none;
  padding: 0;
}

.search-placeholder {
  color: #8aa39a;
}

.search-action {
  flex-shrink: 0;
  padding: 0 16rpx 0 8rpx;
  font-size: 24rpx;
  color: var(--c-brand-green);
  font-weight: 600;
}

/* demo .section 内：标题 + 一级分类白卡片 */
.category-section {
  flex-shrink: 0;
  /* demo .section margin 12px 0 顶 */
  margin-top: 24rpx;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.section-title {
  /* demo h3 17px */
  font-size: 34rpx;
  font-weight: 600;
  color: var(--c-text);
}

.first-category-wrap {
  background: #ffffff;
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  padding: 8rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.first-category-swiper {
  /* 收紧一级分类区高度，避免短文案卡片出现大块空白 */
  height: 336rpx;
}

.first-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16rpx;
  padding: 8rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  align-content: start;
}

.first-category-grid--single {
  min-height: auto;
}

.first-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 152rpx;
  padding: 8rpx 4rpx 8rpx;
  border-radius: 28rpx;
  background: transparent;
  border: none;
  box-sizing: border-box;
  transition: opacity 0.15s ease, transform 0.15s ease;

  &.active {
    background: linear-gradient(145deg, #e7f8f0, #f1fbf6);
    color: var(--c-brand-green);
    font-weight: 600;
    box-shadow: 0 4rpx 8rpx rgba(10, 159, 109, 0.12);
  }
}

.first-category-card--hover {
  opacity: 0.88;
}

.first-category-image {
  /* demo .first-chip::before 42×42，圆角 12px */
  width: 84rpx;
  height: 84rpx;
  border-radius: 24rpx;
  background: linear-gradient(145deg, #dff1e8, #cdebdc);
  flex-shrink: 0;
}

.first-category-card.active .first-category-image {
  box-shadow: 0 4rpx 14rpx rgba(10, 159, 109, 0.35);
}

.first-category-name {
  /* demo .first-chip gap 8px + font 11px */
  margin-top: 8rpx;
  width: 100%;
  font-size: 22rpx;
  line-height: 1.2;
  color: #4f665d;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-category-card.active .first-category-name {
  color: var(--c-brand-green);
}

.first-level-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rpx;
  margin: 16rpx auto 0;
}

.indicator-dot {
  width: 36rpx;
  height: 8rpx;
  border-radius: 999rpx;
  background: #dbe9e2;
  transition: width 0.2s ease, background 0.2s ease;
}

.indicator-dot.active {
  width: 56rpx;
  background: linear-gradient(145deg, var(--c-brand-green-2), var(--c-brand-green));
}

.product-layout {
  flex: 1;
  min-height: 0;
  /* demo .category-layout margin-top 10px */
  margin-top: 20rpx;
  /* 二级分类 + 商品区通栏：抵消 content-wrap 左右 32rpx，商品列更宽 */
  margin-left: -32rpx;
  margin-right: -32rpx;
  width: auto;
  align-self: stretch;
}

.product-body {
  display: flex;
  height: 100%;
  min-height: 0;
  /* demo .category-layout min-height 440px */
  min-height: 880rpx;
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-lg);
  overflow: hidden;
  background: var(--c-card);
}

.category-pane {
  /* demo grid 92px 侧栏 */
  width: 184rpx;
  flex-shrink: 0;
  height: 100%;
  background: #f8fcfa;
  border-right: 1rpx solid #edf5f1;
  border-top-left-radius: var(--c-radius-lg);
  border-bottom-left-radius: var(--c-radius-lg);
}

.category-scroll-inner {
  padding-bottom: var(--home-goods-scroll-pad);
  box-sizing: border-box;
}

.category-item {
  min-height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16rpx;
  font-size: 24rpx;
  color: #5f726a;
  text-align: center;
  border-left: 6rpx solid transparent;
  background: transparent;
  box-sizing: border-box;

  &.active {
    color: var(--c-brand-green);
    background: #ffffff;
    border-left-color: var(--c-brand-green);
    font-weight: 600;
  }
}

.category-item--hover {
  opacity: 0.88;
}

.goods-pane {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  /* 对齐设计图 goods-area padding:10px */
  padding: 16rpx 0 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border-top-right-radius: var(--c-radius-lg);
  border-bottom-right-radius: var(--c-radius-lg);
}

.goods-scroll {
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* 内层包裹：各端对 scroll-view 直接 padding 支持不一致，用内层垫高更稳 */
.goods-scroll-inner {
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: var(--home-goods-scroll-pad);
  box-sizing: border-box;
}

.pane-footer-tip {
  text-align: center;
  color: #9ba8a2;
  font-size: 24rpx;
  padding: 24rpx 12rpx 32rpx;
}

.empty-list-tip {
  text-align: center;
  color: #909399;
  font-size: 28rpx;
  padding: 40rpx 0;
}

.goods-card {
  display: grid;
  /* 窄屏：缩略图列随屏宽比例收缩；宽屏仍接近 demo 约 92px/侧 */
  grid-template-columns: minmax(112rpx, 36%) minmax(0, 1fr);
  gap: min(16rpx, 2.5vw);
  align-items: stretch;
  background: #fff;
  padding: 0;
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-md);
  margin-bottom: 16rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.goods-card--pressed {
  opacity: 0.96;
}

.goods-image {
  width: 100%;
  align-self: start;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 112rpx;
  max-height: 208rpx;
  border-radius: 16rpx;
  background: linear-gradient(145deg, #f4fbf8, #e4f6ef);
  flex-shrink: 0;
}

.goods-main {
  padding: 10rpx 12rpx 10rpx 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: clamp(22rpx, 3.4vw, 26rpx);
  line-height: 1.35;
  min-height: 0;
  color: var(--c-text);
  font-weight: 400;
  word-break: break-word;
}

.goods-spec {
  display: block;
  margin: 6rpx 0 12rpx;
  font-size: clamp(20rpx, 3vw, 22rpx);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-row {
  /* 栅格：左侧价格区可收缩省略，右侧操作区独占一列，避免 flex 与 text 组件叠在一起 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12rpx;
  row-gap: 8rpx;
  margin-top: auto;
  min-width: 0;
}

.goods-price {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(24rpx, 3.8vw, 32rpx);
  color: var(--c-danger);
  font-weight: 700;
}

.bottom-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-right: 12rpx;
}

.add-btn {
  flex-shrink: 0;
  width: clamp(36rpx, 7.5vw, 48rpx);
  height: clamp(36rpx, 7.5vw, 48rpx);
  background: var(--c-brand-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: clamp(22rpx, 4.5vw, 30rpx);
  font-weight: 700;
  box-sizing: border-box;
  padding: 0;
  line-height: 1;
}

/* 「+」在圆内几何居中：抵消 text 默认行高/基线导致的视觉偏移 */
.add-btn-plus {
  line-height: 1;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: center;
  display: block;
  transform: translateY(-2rpx);
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 6rpx;
  flex-shrink: 0;
}

.qty-btn {
  width: clamp(32rpx, 6.5vw, 42rpx);
  height: clamp(32rpx, 6.5vw, 42rpx);
  border: 1rpx solid #b9decf;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand-green);
  font-size: clamp(18rpx, 3.2vw, 24rpx);
  font-weight: 700;
  background: #fff;
  box-sizing: border-box;
}

.qty-num {
  min-width: 40rpx;
  max-width: 64rpx;
  text-align: center;
  font-size: clamp(18rpx, 3vw, 24rpx);
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 底部购物车：对齐 demo .cart-bar / .cart-inner / .settle
.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10010;
  width: 100%;
  max-width: 840rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  overflow: visible;
  /* demo .cart-bar bottom:72px — 在 tab 之上留出空隙；与 uni --window-bottom 叠加 */
  /* #ifdef H5 */
  bottom: calc(var(--window-bottom, calc(50px + env(safe-area-inset-bottom, 0px))) + 44rpx);
  /* #endif */
  /* #ifndef H5 */
  bottom: calc(100rpx + constant(safe-area-inset-bottom));
  bottom: calc(100rpx + env(safe-area-inset-bottom, 0px));
  /* #endif */
}

.cart-inner {
  min-height: 96rpx;
  border-radius: 36rpx;
  background: linear-gradient(145deg, #ffffff, #f5fbf8);
  border: 1rpx solid #d9ebe3;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx;
  box-shadow: 0 16rpx 36rpx rgba(10, 159, 109, 0.12);
  box-sizing: border-box;
}

.cart-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding-left: 8rpx;
  flex: 1;
  min-width: 0;
}

.cart-count {
  min-width: 52rpx;
  height: 52rpx;
  padding: 0 8rpx;
  border-radius: 26rpx;
  background: linear-gradient(145deg, var(--c-brand-green), var(--c-brand-green-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  text {
    font-size: 24rpx;
    font-weight: 700;
    color: #fff;
  }
}

.cart-text-col {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
  min-width: 0;
}

.cart-items-label {
  font-size: 22rpx;
  color: #6f8179;
}

.cart-total-money {
  font-size: 32rpx;
  font-weight: 700;
  letter-spacing: 0.4rpx;
  color: #1f2a26;
}

.cart-settle {
  flex-shrink: 0;
  min-height: 72rpx;
  padding: 0 32rpx;
  border-radius: 28rpx;
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 700;
  box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1);

  text {
    color: #fff;
  }
}

// 加载状态
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  color: #909399;
  font-size: 28rpx;
}
</style>