样式

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./",
   "projectname": "pure-project-vantui",
   "description": "",
-  "appid": "wx7ed74d60503b5ee3",
+  "appid": "wx8f48874e3bf1dccd",
   "setting": {
     "urlCheck": false,
     "es6": true,

src/pages/cart/index.less

@@ -24,6 +24,15 @@
 
   .cart-empty {
     padding-top: 160rpx;
+
+    &__btn {
+      margin-top: 24rpx;
+      padding: 14rpx 60rpx;
+      background: #ee0a24;
+      color: #fff;
+      font-size: 28rpx;
+      border-radius: 999rpx;
+    }
   }
 
   .cart-loading {

src/pages/cart/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import Taro, { useDidShow } from '@tarojs/taro'
 import { View, Text, Image, Textarea, ScrollView } from '@tarojs/components'
 import { Button, Empty, Icon, Popup, Stepper } from '@antmjs/vantui'
+import useAuthStore from '@/stores/auth/useAuthStore'
 import useCartStore from '@/stores/cart/useCartStore'
 import { createOrderApi } from '@/services/order'
 import { getStoreInfoApi } from '@/services/store'
@@ -12,6 +13,7 @@ import type { StoreDetail } from '@/types/store'
 import './index.less'
 
 export default function CartPage() {
+  const token = useAuthStore(s => s.token)
   const items = useCartStore(s => s.items)
   const totalQuantity = useCartStore(s => s.totalQuantity)
   const totalAmount = useCartStore(s => s.totalAmount)
@@ -39,6 +41,12 @@ export default function CartPage() {
   const purchasable = items.filter(item => item.status === 1)
   const hasInvalid = items.length > 0 && purchasable.length < items.length
 
+  const loggedIn = !!token
+
+  const goLogin = useCallback(() => {
+    Taro.navigateTo({ url: '/pages/login/index' })
+  }, [])
+
   /** 拉取门店配送信息 */
   const fetchStoreInfo = useCallback(() => {
     setStoreLoading(true)
@@ -49,6 +57,8 @@ export default function CartPage() {
   }, [])
 
   useDidShow(() => {
+    // 未登录不请求接口，直接展示去登录空态（参考消息页）
+    if (!loggedIn) return
     fetchCart().catch(() => {})
     // 从门店信息编辑页返回且弹层仍打开时 → 刷新配送信息
     if (showOrder) fetchStoreInfo()
@@ -177,13 +187,17 @@ export default function CartPage() {
       {/* ========== 头部 ========== */}
       <View className='cart-header'>
         <Text className='cart-header__title'>购物车</Text>
-        {items.length > 0 && (
+        {loggedIn && items.length > 0 && (
           <Text className='cart-header__clear' onClick={handleClear}>清空</Text>
         )}
       </View>
 
       {/* ========== 列表 ========== */}
-      {items.length === 0 ? (
+      {!loggedIn ? (
+        <Empty description='登录后查看购物车' className='cart-empty'>
+          <View className='cart-empty__btn' onClick={goLogin}>去登录</View>
+        </Empty>
+      ) : items.length === 0 ? (
         loading ? (
           <View className='cart-loading'><Text>加载中...</Text></View>
         ) : (
@@ -238,14 +252,14 @@ export default function CartPage() {
         ))
       )}
 
-      {hasInvalid && (
+      {loggedIn && hasInvalid && (
         <View className='cart-invalid-hint'>
           <Text>部分商品已下架或未设置您所在等级的价格，不可下单</Text>
         </View>
       )}
 
       {/* ========== 底部结算栏 ========== */}
-      {items.length > 0 && (
+      {loggedIn && items.length > 0 && (
         <View className='cart-footer'>
           <View className='cart-footer__total'>
             <Text className='cart-footer__label'>合计（可购{totalQuantity}件）</Text>

src/pages/index/index.tsx

@@ -102,6 +102,11 @@ export default function IndexPage() {
     Taro.switchTab({ url: '/pages/product/index' })
   }, [])
 
+  /** 跳转商品详情 */
+  const goDetail = useCallback((id: number) => {
+    Taro.navigateTo({ url: `/pages/product-detail/index?id=${id}` })
+  }, [])
+
   /** 搜索框聚焦/提交 → 商品页搜索 */
   const handleSearchFocus = useCallback(() => {
     goProduct(keyword.trim())
@@ -240,7 +245,7 @@ export default function IndexPage() {
         ) : (
           <View className='product-grid'>
             {products.map(product => (
-              <View key={product.id} className='product-card' onClick={() => goProduct()}>
+              <View key={product.id} className='product-card' onClick={() => goDetail(product.id)}>
                 <Image
                   className='product-card__image'
                   src={getProductCover(product) || 'https://img.yzcdn.cn/vant/cat.jpeg'}

src/pages/product/index.less

@@ -3,6 +3,9 @@
   display: flex;
   flex-direction: column;
   background: #f7f8fa;
+  // 底部预留给自定义 tabBar（110rpx + 安全区），避免列表被遮挡
+  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
 
   .product-search {
     flex-shrink: 0;
@@ -92,8 +95,8 @@
   .product-main {
     flex: 1;
     min-width: 0;
+    height: 100%;
     padding: 20rpx 20rpx 40rpx;
-    overflow-y: auto;
     box-sizing: border-box;
   }
 

src/pages/product/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
+import Taro, { useDidShow } from '@tarojs/taro'
 import { View, Text, Image, ScrollView } from '@tarojs/components'
 import { Button, Empty, Popup, Search, Stepper } from '@antmjs/vantui'
 import useCartStore from '@/stores/cart/useCartStore'
@@ -149,11 +149,12 @@ export default function ProductPage() {
     fetchList(1, true, pendingKeyword ?? undefined)
   })
 
-  useReachBottom(() => {
+  /** 右侧列表触底加载（页面为固定布局不滚动，由 ScrollView 触发） */
+  const handleLoadMore = useCallback(() => {
     if (!finished) {
       fetchList(page + 1, false)
     }
-  })
+  }, [finished, page, fetchList])
 
   /** 点击一级分类：有子分类仅展开/收起（不可选中），无子分类则选中 */
   const handleTopTap = useCallback((cat: Category) => {
@@ -274,8 +275,13 @@ export default function ProductPage() {
           })}
         </ScrollView>
 
-        {/* ========== 右侧商品列表 ========== */}
+        {/* ========== 右侧商品列表（ScrollView 滚动 + 触底加载） ========== */}
-        <View className='product-main'>
+        <ScrollView
+          scrollY
+          className='product-main'
+          lowerThreshold={80}
+          onScrollToLower={handleLoadMore}
+        >
           {/* 商品列表 */}
           {products.length === 0 && !loading ? (
             <Empty description='暂无商品' className='product-empty' />
@@ -317,7 +323,7 @@ export default function ProductPage() {
           {finished && products.length > 0 && (
             <View className='product-loading'><Text>没有更多了</Text></View>
           )}
-        </View>
+        </ScrollView>
       </View>
 
       {/* ========== 加购弹层 ========== */}