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 sq-hero-header--client">
        <view class="hero-top-main">
          <view class="hero-top-text">
            <view class="hero-brand-row">
              <image class="hero-brand-logo" :src="IMG_LOGO_WATERMARK" mode="aspectFit" />
              <text class="hero-brand">陇耘鲜达</text>
            </view>
            <text class="hero-region-line">{{ deliveryLineLeft }}</text>
          </view>
        </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>

      <!-- 一级分类 + 侧栏/商品区：整体纵向滚动，触底加载商品分页（及侧栏分页） -->
      <scroll-view
        scroll-y
        class="home-bottom-scroll"
        :show-scrollbar="true"
        :enable-flex="true"
        :lower-threshold="80"
        @scrolltolower="onHomeBottomScrollToLower"
      >
        <view class="home-bottom-scroll-inner">
          <!-- 与顶栏一致：scroll-view 抵消 content-wrap 左右 32rpx；分类区单独缩进保持原视觉 -->
          <view class="home-bottom-category-pad">
          <!-- 一级分类及以下在灰底区域，独立白卡片（与 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>

          <view class="product-layout">
            <view class="product-body">
              <view class="category-pane">
                <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>
              </view>

              <view class="goods-pane">
                <view class="goods-scroll">
                  <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 pane-footer-tip--nomore"
                    >
                      没有更多了
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-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 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
  }
}

/** 下部分整体滚动触底：仅商品分页（侧栏二级分类在 reloadSidebar 时已一次性拉全） */
function onHomeBottomScrollToLower() {
  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)
  }
}

/** 侧栏（二级/筛选项）按接口分页循环拉全，与一级分类 loadAllRootCategories 策略一致 */
async function reloadSidebar() {
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token) {
    sidebarRows.value = []
    return
  }
  if (sidebarLoading.value) return
  sidebarRows.value = []
  sidebarLoading.value = true
  try {
    let page = 1
    while (true) {
      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) break
      const d = body.data || {}
      const list = d.list || []
      for (const row of list) {
        sidebarRows.value.push(row)
      }
      const totalPages = Number(d.totalPages) || 0
      if (page >= totalPages || list.length === 0) break
      page += 1
    }
  } catch (error) {
    console.error('加载侧栏分类失败:', error)
  } finally {
    sidebarLoading.value = 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 Promise.all([loadAllRootCategories(), reloadSidebar(), cartStore.fetchCart()]).finally(() => {
    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%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 底部占位：略大于结算条+tab 占用高度即可；再大只会拉长「没有更多了」与结算条之间的灰区 */
  --home-goods-scroll-pad: calc(160rpx + constant(safe-area-inset-bottom));
  --home-goods-scroll-pad: calc(160rpx + env(safe-area-inset-bottom, 0px));
}

/* #ifdef H5 */
.home-root {
  --home-goods-scroll-pad: calc(132rpx + constant(safe-area-inset-bottom));
  --home-goods-scroll-pad: calc(132rpx + 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 {
  flex: 1;
  height: auto;
  max-height: none;
  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;
}

/* 头部以下整块纵向滚动（需占满剩余高度 scroll-view 才能滚动） */
/* 与 .filter-top-wrap 同理：先拉满 inquiry 内容宽，避免子级负 margin 在 scroll-view 内被裁切导致商品区变窄 */
.home-bottom-scroll {
  flex: 1;
  min-height: 0;
  margin: 0 -32rpx;
  width: calc(100% + 64rpx);
  max-width: calc(100% + 64rpx);
  box-sizing: border-box;
}

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

.home-bottom-category-pad {
  padding: 0 32rpx;
  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-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.hero-brand-logo {
  width: 88rpx;
  height: 88rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

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

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

/* 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 {
  /* 随下部分 scroll 内容增高，不再单独占满一屏 */
  /* demo .category-layout margin-top 10px */
  margin-top: 20rpx;
  /* 宽度已由 .home-bottom-scroll 拉满，此处不再用负 margin（在 scroll-view 内易失效） */
  width: 100%;
  box-sizing: border-box;
}

.product-body {
  display: flex;
  align-items: stretch;
  /* 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;
  align-self: stretch;
  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 {
  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;
  align-self: stretch;
  border-top-right-radius: var(--c-radius-lg);
  border-bottom-right-radius: var(--c-radius-lg);
}

.goods-scroll {
  flex: 1;
  min-width: 0;
}

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

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

/* 列表结束文案：收紧与下方滚动留白的间距 */
.pane-footer-tip--nomore {
  padding-top: 12rpx;
  padding-bottom: 4rpx;
}

.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;
  /* 紧贴 tab 上沿：略留一点避免与底栏视觉粘连（H5 原 +44rpx 空隙偏大） */
  /* #ifdef H5 */
  bottom: calc(var(--window-bottom, calc(50px + env(safe-area-inset-bottom, 0px))) + 2rpx);
  /* #endif */
  /* #ifndef H5 */
  bottom: 10px;
  /* #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>