From ca2436a2e8a4bc2f10d1b28a6815a0bc22baf0c2 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, 7 Mar 2026 15:39:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6=E9=87=8D=E6=9E=84=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 GoodsList.scss 样式文件，实现网格布局和商品卡片样式
- 重构 GoodsList.tsx 组件，使用新的样式结构和 ShopGoods 类型
- 移除 Share 图标依赖，简化购买按钮设计
- 注释掉首页的桶装水和水票套餐分类入口
- 更新政企采购专区跳转链接至正确分类ID
- 在商品列表页面添加空状态显示组件
- 修改商品列表请求参数，增加状态过滤条件
---
 src/pages/index/index.tsx                   |   6 +-
 src/shop/category/components/GoodsList.scss | 122 ++++++++++++++++++++
 src/shop/category/components/GoodsList.tsx  |  73 ++++++------
 src/shop/category/index.tsx                 |  10 +-
 4 files changed, 171 insertions(+), 40 deletions(-)

diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 1efe053..66324c9 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -179,8 +179,8 @@ function Home() {
   >(
     () => [
       { key: 'recommend', title: '推荐', params: { recommend: 1 } },
-      { key: '4476', title: '桶装水', params: { categoryId: 4476 } },
-      { key: '4556', title: '水票套餐', params: { categoryId: 4556 } },
+      // { key: '4476', title: '桶装水', params: { categoryId: 4476 } },
+      // { key: '4556', title: '水票套餐', params: { categoryId: 4556 } },
       // { key: '4557', title: '购机套餐', params: { categoryId: 4557 } },
       // { key: '4477', title: '饮水设备', params: { categoryId: 4477 } },
     ],
@@ -290,7 +290,7 @@ function Home() {
           </View>
         </View>
 
-        <View className="ticket-card" onClick={() => Taro.navigateTo({ url: `/shop/category/index?id=4557` })}>
+        <View className="ticket-card" onClick={() => Taro.navigateTo({ url: `/shop/category/index?id=4560` })}>
           <View className="ticket-card__head">
             <Text className="ticket-card__title">政企采购专区</Text>
           </View>
diff --git a/src/shop/category/components/GoodsList.scss b/src/shop/category/components/GoodsList.scss
index e69de29..de245e8 100644
--- a/src/shop/category/components/GoodsList.scss
+++ b/src/shop/category/components/GoodsList.scss
@@ -0,0 +1,122 @@
+
+.goods-grid {
+  margin-top: 18rpx;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18rpx;
+}
+
+.goods-card {
+  border-radius: 22rpx;
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
+}
+
+.goods-card__imgWrap {
+  padding: 18rpx 18rpx 0;
+}
+
+.goods-card__img {
+  width: 100%;
+  height: 280rpx;
+  border-radius: 18rpx;
+  background: #f4f4f4;
+}
+
+.goods-card__body {
+  padding: 18rpx 18rpx 20rpx;
+}
+
+.goods-card__title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #1c1c1c;
+  min-height: 72rpx;
+}
+
+.goods-card__meta {
+  margin-top: 10rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 10rpx;
+}
+
+.goods-card__sold {
+  font-size: 22rpx;
+  color: #9a9a9a;
+  white-space: nowrap;
+}
+
+.goods-card__price {
+  display: flex;
+  align-items: baseline;
+  gap: 4rpx;
+  color: #27c86b;
+  white-space: nowrap;
+}
+
+.goods-card__priceUnit {
+  font-size: 22rpx;
+  font-weight: 800;
+}
+
+.goods-card__priceValue {
+  font-size: 36rpx;
+  font-weight: 900;
+}
+
+.goods-card__actions {
+  margin-top: 16rpx;
+  display: flex;
+  gap: 14rpx;
+}
+
+.goods-card__btn {
+  flex: 1;
+  height: 64rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.goods-card__btn--ghost {
+  border: 2rpx solid rgba(32, 194, 106, 0.7);
+  background: #ffffff;
+}
+
+.goods-card__btn--primary {
+  background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%);
+}
+
+.goods-card__btnText {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #18b85a;
+  white-space: nowrap;
+}
+
+.goods-card__btnText--primary {
+  color: #ffffff;
+}
+
+.buy-btn{
+  height: 70px;
+  background: linear-gradient(to bottom, #1cd98a, #24ca94);
+  border-radius: 100px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .cart-icon{
+    background: linear-gradient(to bottom, #bbe094, #4ee265);
+    border-radius: 100px 0 0 100px;
+    height: 70px;
+  }
+}
diff --git a/src/shop/category/components/GoodsList.tsx b/src/shop/category/components/GoodsList.tsx
index f84ae9e..742aa7b 100644
--- a/src/shop/category/components/GoodsList.tsx
+++ b/src/shop/category/components/GoodsList.tsx
@@ -1,51 +1,54 @@
 import {Image} from '@nutui/nutui-react-taro'
-import {Share} from '@nutui/icons-react-taro'
 import {View, Text} from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import './GoodsList.scss'
+import {ShopGoods} from "@/api/shop/shopGoods/model";
 
 
 const GoodsList = (props: any) => {
 
   return (
     <>
-      <View className={'py-3'}>
-        <View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
-          {props.data?.map((item: any, index: number) => {
-            return (
-              <View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
-                <Image src={item.image} mode={'aspectFit'} lazyLoad={false}
-                       radius="10px 10px 0 0" height="180"
-                       onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
-                <View className={'flex flex-col p-2 rounded-lg'}>
-                  <View>
-                    <View className={'car-no text-sm'}>{item.name}</View>
-                    <View className={'flex justify-between text-xs py-1'}>
-                      <Text className={'text-orange-500'}>{item.comments}</Text>
-                      <Text className={'text-gray-400'}>已售 {item.sales}</Text>
-                    </View>
-                    <View className={'flex justify-between items-center py-2'}>
-                      <View className={'flex text-red-500 text-xl items-baseline'}>
-                        <Text className={'text-xs'}>￥</Text>
-                        <Text className={'font-bold text-2xl'}>{item.price}</Text>
-                        <Text className={'text-xs px-1'}>会员价</Text>
-                        <Text className={'text-xs text-gray-400 line-through'}>￥{item.salePrice}</Text>
-                      </View>
-                      <View className={'buy-btn'}>
-                        <View className={'cart-icon'}>
-                          <Share size={20} className={'mx-4 mt-2'}
-                                 onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
-                        </View>
-                        <View className={'text-white pl-4 pr-5'}
-                             onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
-                        </View>
-                      </View>
-                    </View>
+      <View className={'p-3'}>
+
+        <View className="goods-grid">
+          {props.data?.map((item: ShopGoods) => (
+            <View key={item.goodsId} className="goods-card">
+              <View className="goods-card__imgWrap">
+                <Image
+                  className="goods-card__img"
+                  src={item.image || ''}
+                  mode="aspectFill"
+                  lazyLoad={false}
+                  onClick={() =>
+                    Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` })
+                  }
+                />
+              </View>
+
+              <View className="goods-card__body">
+                <Text className="goods-card__title">{item.name}</Text>
+                <View className="goods-card__meta">
+                  <Text className="goods-card__sold">已购:{item.sales || 0}人</Text>
+                  <View className="goods-card__price">
+                    <Text className="goods-card__priceUnit">￥</Text>
+                    <Text className="goods-card__priceValue">{item.buyingPrice}</Text>
+                  </View>
+                </View>
+
+                <View className="goods-card__actions">
+                  <View
+                    className="goods-card__btn goods-card__btn--primary"
+                    onClick={() =>
+                      Taro.navigateTo({ url: `/shop/goodsDetail/index?id=${item.goodsId}` })
+                    }
+                  >
+                    <Text className="goods-card__btnText goods-card__btnText--primary">立即购买</Text>
                   </View>
                 </View>
               </View>
-            )
-          })}
+            </View>
+          ))}
         </View>
       </View>
     </>
diff --git a/src/shop/category/index.tsx b/src/shop/category/index.tsx
index 7899e20..74845c3 100644
--- a/src/shop/category/index.tsx
+++ b/src/shop/category/index.tsx
@@ -1,7 +1,7 @@
 import Taro from '@tarojs/taro'
 import GoodsList from './components/GoodsList'
 import {useShareAppMessage} from "@tarojs/taro"
-import {Loading} from '@nutui/nutui-react-taro'
+import {Loading,Empty} from '@nutui/nutui-react-taro'
 import {useEffect, useState} from "react"
 import {useRouter} from '@tarojs/taro'
 import './index.scss'
@@ -21,7 +21,7 @@ function Category() {
     // 1.加载远程数据
     const id = Number(params.id)
     const nav = await getCmsNavigation(id)
-    const shopGoods = await pageShopGoods({categoryId: id})
+    const shopGoods = await pageShopGoods({categoryId: id, status: 0})
 
     // 2.处理业务逻辑
     setCategoryId(id)
@@ -59,6 +59,12 @@ function Category() {
     )
   }
 
+  if(list.length == 0){
+    return (
+      <Empty description="暂无数据"/>
+    )
+  }
+
   return (
     <>
       <div className={'flex flex-col'}>