From 7572738bcd797d8ee40fd50e5bbb69a82ccadc6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sat, 11 Jul 2026 18:06:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E8=B0=83=E6=95=B4=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=88=97=E8=A1=A8=E4=B8=BA=E4=B8=80=E6=8E=92=E4=B8=A4?=
 =?UTF-8?q?=E4=B8=AA=E7=AB=96=E5=90=91=E6=96=B9=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 商品列表容器调整为 flex-wrap 布局以支持多列显示
- 每个商品项宽度设为 50%，左右间距微调
- 商品卡片改为竖向结构，图片置顶，固定高度 144px，图片模式改为 aspectFill
- 商品名称、积分标签、价格、销量排布调整优化
- 加购按钮位置及样式微调增加左边距
- 保持顶部搜索栏、左侧分类栏和排序栏布局不变
---
 .workbuddy/memory/2026-07-11.md |   8 +++
 src/pages/shop/index.tsx        | 114 ++++++++++++++++----------------
 2 files changed, 66 insertions(+), 56 deletions(-)
 create mode 100644 .workbuddy/memory/2026-07-11.md

diff --git a/.workbuddy/memory/2026-07-11.md b/.workbuddy/memory/2026-07-11.md
new file mode 100644
index 0000000..58069c2
--- /dev/null
+++ b/.workbuddy/memory/2026-07-11.md
@@ -0,0 +1,8 @@
+# 2026-07-11
+
+## 商品列表布局改为一排两个方格
+- 文件：`src/pages/shop/index.tsx` 商品列表区域
+- 改动：从「一排一个横向卡片（左小图+右信息）」改为「一排两个竖向方格卡片」
+- 实现：容器 `flex flex-wrap`，每项 `w-1/2 p-1`；卡片竖向结构：图片(`h-36`, `mode=aspectFill`)在上，商品信息在下
+- 顶部搜索栏、左侧分类栏、排序栏保持不变
+- 注：`tsc --noEmit` 报 TS2688(@tarojs/taro 类型缺失) 为改动前既有问题，非本次引入
diff --git a/src/pages/shop/index.tsx b/src/pages/shop/index.tsx
index 839447e..5951908 100644
--- a/src/pages/shop/index.tsx
+++ b/src/pages/shop/index.tsx
@@ -259,73 +259,75 @@ const ShopPage: React.FC = () => {
         >
           <View className='p-2'>
             {goodsList.length > 0 ? (
-              <View className='flex flex-col gap-2'>
+              <View className='flex flex-wrap'>
                 {goodsList.map(item => (
                   <View
                     key={item.goodsId}
-                    className='bg-white rounded-lg p-2 flex gap-2'
+                    className='w-1/2 p-1'
                     onClick={() => goDetail(item)}
                   >
-                    {/* 商品图片 */}
-                    <View className='w-20 h-20 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0'>
-                      <Image
-                        className='w-full h-full'
-                        src={getCompressedImageUrl(item.image || item.files || '')}
-                        mode='aspectFit'
-                        lazyLoad
-                      />
-                    </View>
-
-                    {/* 商品信息 */}
-                    <View className='flex-1 flex flex-col justify-between min-w-0'>
-                      {/* 标题 + 积分标签 */}
-                      <View>
-                        <Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
-                          {item.name || item.goodsName}
-                        </Text>
-                        {item.gainIntegral && item.gainIntegral > 0 ? (
-                          <View className='inline-block mt-1'>
-                            <Text className='text-xs text-orange-500 bg-orange-50 px-1 py-0.5 rounded'>
-                              +{item.gainIntegral}积分
-                            </Text>
-                          </View>
-                        ) : null}
+                    <View className='bg-white rounded-lg overflow-hidden flex flex-col'>
+                      {/* 商品图片 */}
+                      <View className='w-full h-36 bg-gray-100 overflow-hidden'>
+                        <Image
+                          className='w-full h-full'
+                          src={getCompressedImageUrl(item.image || item.files || '')}
+                          mode='aspectFill'
+                          lazyLoad
+                        />
                       </View>
 
-                      {/* 价格 + 销量 + 加购 */}
-                      <View className='flex items-end justify-between'>
-                        <View className='flex-1 min-w-0'>
-                          <Text className='text-sm text-red-500 font-medium'>
-                            ¥{getDisplayPrice(item)}
+                      {/* 商品信息 */}
+                      <View className='p-2 flex flex-col gap-1'>
+                        {/* 标题 + 积分标签 */}
+                        <View>
+                          <Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
+                            {item.name || item.goodsName}
                           </Text>
-                          {item.unitName ? (
-                            <Text className='text-xs text-gray-400'>/{item.unitName}</Text>
-                          ) : null}
-                          {/* VIP 划掉原价 */}
-                          {isVipMember() && item.dealerPrice ? (
-                            <Text className='text-xs text-gray-400 line-through ml-1'>
-                              ¥{item.price}
-                            </Text>
-                          ) : item.salePrice && item.salePrice !== item.price ? (
-                            isGuest() ? null : (
-                              <Text className='text-xs text-gray-400 line-through ml-1'>
-                                ¥{item.salePrice}
+                          {item.gainIntegral && item.gainIntegral > 0 ? (
+                            <View className='inline-block mt-1'>
+                              <Text className='text-xs text-orange-500 bg-orange-50 px-1 py-0.5 rounded'>
+                                +{item.gainIntegral}积分
                               </Text>
-                            )
+                            </View>
                           ) : null}
-                          {/* 销量 */}
-                          {item.sales !== undefined && item.sales > 0 && (
-                            <Text className='text-xs text-gray-400 ml-2'>
-                              已售{item.sales}
-                            </Text>
-                          )}
                         </View>
-                        {/* 加购按钮 */}
-                        <View
-                          className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0'
-                          onClick={(e) => handleAddToCart(e, item)}
-                        >
-                          <Text className='text-white text-lg leading-none'>+</Text>
+
+                        {/* 价格 + 销量 + 加购 */}
+                        <View className='flex items-end justify-between'>
+                          <View className='flex-1 min-w-0'>
+                            <Text className='text-sm text-red-500 font-medium'>
+                              ¥{getDisplayPrice(item)}
+                            </Text>
+                            {item.unitName ? (
+                              <Text className='text-xs text-gray-400'>/{item.unitName}</Text>
+                            ) : null}
+                            {/* VIP 划掉原价 */}
+                            {isVipMember() && item.dealerPrice ? (
+                              <Text className='text-xs text-gray-400 line-through ml-1'>
+                                ¥{item.price}
+                              </Text>
+                            ) : item.salePrice && item.salePrice !== item.price ? (
+                              isGuest() ? null : (
+                                <Text className='text-xs text-gray-400 line-through ml-1'>
+                                  ¥{item.salePrice}
+                                </Text>
+                              )
+                            ) : null}
+                            {/* 销量 */}
+                            {item.sales !== undefined && item.sales > 0 && (
+                              <Text className='text-xs text-gray-400 block mt-0.5'>
+                                已售{item.sales}
+                              </Text>
+                            )}
+                          </View>
+                          {/* 加购按钮 */}
+                          <View
+                            className='w-7 h-7 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 ml-1'
+                            onClick={(e) => handleAddToCart(e, item)}
+                          >
+                            <Text className='text-white text-lg leading-none'>+</Text>
+                          </View>
                         </View>
                       </View>
                     </View>