Kaynağa Gözat

♻️ refactor(cart): optimize component structure and layout

- 调整 Navbar 组件位置,将其从 View 容器中移出,优化页面层级结构
- 修改 ScrollView 样式,移除固定高度限制,使用 flex-1 自适应布局
- 保持原有功能不变,优化组件嵌套关系,提升代码可维护性
yourname 3 ay önce
ebeveyn
işleme
a558b4db27
1 değiştirilmiş dosya ile 129 ekleme ve 131 silme
  1. 129 131
      mini/src/pages/cart/index.tsx

+ 129 - 131
mini/src/pages/cart/index.tsx

@@ -60,155 +60,153 @@ export default function CartPage() {
 
   return (
     <TabBarLayout activeKey="cart">
-      <View className="min-h-screen bg-gray-50">
-        <Navbar
-          title="购物车"
-          leftIcon="i-heroicons-chevron-left-20-solid"
-          onClickLeft={() => Taro.navigateBack()}
-          rightIcon="i-heroicons-trash-20-solid"
-          onClickRight={() => {
-            Taro.showModal({
-              title: '清空购物车',
-              content: '确定要清空购物车吗?',
-              success: (res) => {
-                if (res.confirm) {
-                  clearCart()
-                  setSelectedItems([])
-                }
+      <Navbar
+        title="购物车"
+        leftIcon="i-heroicons-chevron-left-20-solid"
+        onClickLeft={() => Taro.navigateBack()}
+        rightIcon="i-heroicons-trash-20-solid"
+        onClickRight={() => {
+          Taro.showModal({
+            title: '清空购物车',
+            content: '确定要清空购物车吗?',
+            success: (res) => {
+              if (res.confirm) {
+                clearCart()
+                setSelectedItems([])
               }
-            })
-          }}
-        />
-        
-        <ScrollView className="h-screen pt-12">
-          <View className="px-4 py-4">
-            {cart.items.length === 0 ? (
-              <View className="flex flex-col items-center justify-center py-20">
-                <View className="i-heroicons-shopping-cart-20-solid w-16 h-16 text-gray-300 mb-4" />
-                <Text className="text-gray-500 mb-4">购物车是空的</Text>
-                <Button
-                  onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
+            }
+          })
+        }}
+      />
+      
+      <ScrollView className="flex-1">
+        <View className="px-4 py-4">
+          {cart.items.length === 0 ? (
+            <View className="flex flex-col items-center justify-center py-20">
+              <View className="i-heroicons-shopping-cart-20-solid w-16 h-16 text-gray-300 mb-4" />
+              <Text className="text-gray-500 mb-4">购物车是空的</Text>
+              <Button
+                onClick={() => Taro.navigateTo({ url: '/pages/goods-list/index' })}
+              >
+                去逛逛
+              </Button>
+            </View>
+          ) : (
+            <>
+              {/* 全选 */}
+              <View className="bg-white rounded-lg p-4 mb-4 flex items-center">
+                <View 
+                  className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 ${
+                    selectedItems.length === cart.items.length 
+                      ? 'bg-blue-500 border-blue-500' 
+                      : 'border-gray-300'
+                  }`}
+                  onClick={toggleSelectAll}
                 >
-                  去逛逛
-                </Button>
-              </View>
-            ) : (
-              <>
-                {/* 全选 */}
-                <View className="bg-white rounded-lg p-4 mb-4 flex items-center">
-                  <View 
-                    className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 ${
-                      selectedItems.length === cart.items.length 
-                        ? 'bg-blue-500 border-blue-500' 
-                        : 'border-gray-300'
-                    }`}
-                    onClick={toggleSelectAll}
-                  >
-                    {selectedItems.length === cart.items.length && (
-                      <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
-                    )}
-                  </View>
-                  <Text className="text-gray-700">全选 ({cart.items.length}件商品)</Text>
+                  {selectedItems.length === cart.items.length && (
+                    <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
+                  )}
                 </View>
+                <Text className="text-gray-700">全选 ({cart.items.length}件商品)</Text>
+              </View>
 
-                {/* 商品列表 */}
-                {cart.items.map((item) => (
-                  <Card key={item.id} className="mb-4">
-                    <View className="p-4">
-                      <View className="flex items-start">
-                        <View 
-                          className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 mt-8 ${
-                            selectedItems.includes(item.id)
-                              ? 'bg-blue-500 border-blue-500'
-                              : 'border-gray-300'
-                          }`}
-                          onClick={() => toggleSelectItem(item.id)}
-                        >
-                          {selectedItems.includes(item.id) && (
-                            <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
-                          )}
-                        </View>
+              {/* 商品列表 */}
+              {cart.items.map((item) => (
+                <Card key={item.id} className="mb-4">
+                  <View className="p-4">
+                    <View className="flex items-start">
+                      <View 
+                        className={`w-5 h-5 border-2 rounded-full flex items-center justify-center mr-3 mt-8 ${
+                          selectedItems.includes(item.id)
+                            ? 'bg-blue-500 border-blue-500'
+                            : 'border-gray-300'
+                        }`}
+                        onClick={() => toggleSelectItem(item.id)}
+                      >
+                        {selectedItems.includes(item.id) && (
+                          <View className="i-heroicons-check-20-solid w-3 h-3 text-white" />
+                        )}
+                      </View>
+                      
+                      <Image 
+                        src={item.image}
+                        className="w-20 h-20 rounded-lg mr-3"
+                        mode="aspectFill"
+                      />
+                      
+                      <View className="flex-1">
+                        <Text className="text-sm font-medium text-gray-900 mb-2 line-clamp-2">
+                          {item.name}
+                        </Text>
                         
-                        <Image 
-                          src={item.image}
-                          className="w-20 h-20 rounded-lg mr-3"
-                          mode="aspectFill"
-                        />
+                        <Text className="text-red-500 font-bold mb-2">
+                          ¥{item.price.toFixed(2)}
+                        </Text>
                         
-                        <View className="flex-1">
-                          <Text className="text-sm font-medium text-gray-900 mb-2 line-clamp-2">
-                            {item.name}
-                          </Text>
-                          
-                          <Text className="text-red-500 font-bold mb-2">
-                            ¥{item.price.toFixed(2)}
-                          </Text>
-                          
-                          <View className="flex items-center justify-between">
-                            <View className="flex items-center border border-gray-300 rounded">
-                              <Button
-                                size="sm"
-                                variant="ghost"
-                                className="px-2"
-                                onClick={() => updateQuantity(item.id, item.quantity - 1)}
-                              >
-                                -
-                              </Button>
-                              <Text className="px-3 py-1 border-x border-gray-300 text-sm">
-                                {item.quantity}
-                              </Text>
-                              <Button
-                                size="sm"
-                                variant="ghost"
-                                className="px-2"
-                                onClick={() => updateQuantity(item.id, item.quantity + 1)}
-                              >
-                                +
-                              </Button>
-                            </View>
-                            
+                        <View className="flex items-center justify-between">
+                          <View className="flex items-center border border-gray-300 rounded">
                             <Button
                               size="sm"
                               variant="ghost"
-                              className="text-red-500"
-                              onClick={() => removeFromCart(item.id)}
+                              className="px-2"
+                              onClick={() => updateQuantity(item.id, item.quantity - 1)}
                             >
-                              删除
+                              -
+                            </Button>
+                            <Text className="px-3 py-1 border-x border-gray-300 text-sm">
+                              {item.quantity}
+                            </Text>
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="px-2"
+                              onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                            >
+                              +
                             </Button>
                           </View>
+                          
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="text-red-500"
+                            onClick={() => removeFromCart(item.id)}
+                          >
+                            删除
+                          </Button>
                         </View>
                       </View>
                     </View>
-                  </Card>
-                ))}
-              </>
-            )}
-          </View>
-        </ScrollView>
+                  </View>
+                </Card>
+              ))}
+            </>
+          )}
+        </View>
+      </ScrollView>
 
-        {/* 底部结算栏 */}
-        {cart.items.length > 0 && (
-          <View className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
-            <View className="flex items-center justify-between">
-              <View>
-                <Text className="text-sm text-gray-600">
-                  已选 {selectedItems.length} 件
-                </Text>
-                <Text className="text-lg font-bold text-red-500">
-                  ¥{selectedItemsTotal.toFixed(2)}
-                </Text>
-              </View>
-              
-              <Button
-                onClick={handleCheckout}
-                disabled={selectedItems.length === 0}
-              >
-                去结算 ({selectedItems.length})
-              </Button>
+      {/* 底部结算栏 */}
+      {cart.items.length > 0 && (
+        <View className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
+          <View className="flex items-center justify-between">
+            <View>
+              <Text className="text-sm text-gray-600">
+                已选 {selectedItems.length} 件
+              </Text>
+              <Text className="text-lg font-bold text-red-500">
+                ¥{selectedItemsTotal.toFixed(2)}
+              </Text>
             </View>
+            
+            <Button
+              onClick={handleCheckout}
+              disabled={selectedItems.length === 0}
+            >
+              去结算 ({selectedItems.length})
+            </Button>
           </View>
-        )}
-      </View>
+        </View>
+      )}
     </TabBarLayout>
   )
 }