From fc5ae31b2b203ec98adbe0b39b76c9107e7b5835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Thu, 16 Oct 2025 14:11:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B5=81=E9=87=8F=E6=B1=A0?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=EF=BC=9A=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=EF=BC=9B=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91=EF=BC=8C=E7=AE=80?=
 =?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mine/traffic-pool/list/index.module.scss  | 182 ++++++++++++++----
 .../mobile/mine/traffic-pool/list/index.tsx   | 177 +++++++----------
 2 files changed, 217 insertions(+), 142 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
index 2fbee5e3..c0ff2a62 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.module.scss
@@ -1,65 +1,175 @@
 .listWrap {
   padding: 12px;
+  background: #f5f5f5;
 }
 
-.cardContent {
+/* 美团风格卡片样式 */
+.cardCompact {
+  margin: 0 0 12px 0;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: #fff;
+}
+
+.cardBody {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+/* 左侧图片区域 */
+.imageBox {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
+  flex-shrink: 0;
   position: relative;
-}
-.checkbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.cardWrap {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  margin-bottom: 12px;
+  overflow: hidden;
 }
 
-.card {
-  margin-bottom: 12px;
+/* 右侧内容区域 */
+.contentArea {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 标题行 */
+.titleRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .title {
   font-size: 16px;
   font-weight: 600;
-  color: #222;
+  color: #1a1a1a;
+  line-height: 1.3;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.desc {
-  font-size: 13px;
-  color: #888;
-  margin: 6px 0 4px 0;
+/* 右侧标签区域 */
+.rightTags {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
 }
 
-.count {
-  font-size: 13px;
-  color: #1677ff;
+.deliveryTag {
+  background: #fff7e6;
+  color: #d46b08;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #ffd591;
 }
 
-.pagination {
+.timeTag {
+  color: #ff6b35;
+  font-size: 11px;
+  font-weight: 500;
   display: flex;
   align-items: center;
+  gap: 2px;
+}
+
+/* 评分和销售信息 */
+.ratingRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+}
+
+.rating {
+  color: #ff6b35;
+  font-weight: 600;
+}
+
+.sales {
+  color: #8c8c8c;
+}
+
+.price {
+  color: #8c8c8c;
+}
+
+/* 配送信息 */
+.deliveryInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 11px;
+  color: #8c8c8c;
+}
+
+/* 中间标签 */
+.middleTag {
+  display: flex;
   justify-content: center;
-  gap: 16px;
-  margin: 16px 0;
+  margin: 4px 0;
 }
 
-.pagination button {
-  background: #f5f5f5;
-  border: none;
+.highScoreTag {
+  background: linear-gradient(135deg, #ff6b35, #ff8c42);
+  color: white;
+  font-size: 10px;
+  padding: 4px 8px;
   border-radius: 4px;
-  padding: 4px 12px;
-  color: #1677ff;
-  cursor: pointer;
+  font-weight: 500;
 }
 
-.pagination button:disabled {
-  color: #ccc;
-  cursor: not-allowed;
+/* 底部按钮区域 */
+.bottomActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.dineInBtn {
+  background: transparent;
+  border: 1px solid #52c41a;
+  color: #52c41a;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.couponBtn {
+  background: linear-gradient(135deg, #ff6b35, #ff8c42);
+  color: white;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  justify-content: center;
+}
+
+.couponText {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-left: 4px;
 }
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
index c805ba75..2ed29bfa 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/index.tsx
@@ -4,9 +4,8 @@ import {
   SearchOutlined,
   ReloadOutlined,
   PlusOutlined,
-  RightOutlined,
 } from "@ant-design/icons";
-import { Input, Button, Pagination, Card, Tag } from "antd";
+import { Input, Button, Pagination, Card } from "antd";
 import styles from "./index.module.scss";
 import { Empty } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
@@ -57,6 +56,31 @@ const TrafficPoolList: React.FC = () => {
     setPage(1);
   };
 
+  const handleRefresh = () => {
+    setPage(1);
+    // 触发数据重新获取
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const params = {
+          page: 1,
+          pageSize,
+          keyword: search,
+        };
+
+        const res: PackageList = await getPackage(params);
+        setList(res?.list || []);
+        setTotal(res?.total || 0);
+      } catch (error) {
+        console.error("获取列表失败:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
@@ -114,7 +138,7 @@ const TrafficPoolList: React.FC = () => {
               />
             </div>
             <Button
-              onClick={() => setPage(1)}
+              onClick={handleRefresh}
               loading={loading}
               size="large"
               icon={<ReloadOutlined />}
@@ -140,127 +164,68 @@ const TrafficPoolList: React.FC = () => {
         ) : (
           <div>
             {list.map(item => (
-              <Card
+              <div
                 key={item.id}
+                className={styles.cardCompact}
                 onClick={() => {
-                  // 进入分组管理
                   navigate(`/mine/traffic-pool/group/${item.id}`);
                 }}
               >
-                <div style={{ display: "flex", alignItems: "flex-start" }}>
-                  {/* 分组图标 */}
+                <div className={styles.cardBody}>
+                  {/* 左侧图片区域（优先展示 pic，缺省时使用假头像） */}
                   <div
-                    style={{
-                      width: "48px",
-                      height: "48px",
-                      borderRadius: "8px",
-                      background: getGroupColor(item.type),
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: item.type === 0 ? "18px" : "24px",
-                      fontWeight: item.type === 0 ? "bold" : "normal",
-                      color: item.type === 0 ? "#333" : "inherit",
-                      marginRight: "12px",
-                      flexShrink: 0,
-                    }}
+                    className={styles.imageBox}
+                    style={{ background: getGroupColor(item.type) }}
                   >
-                    {getGroupIcon(item.type, item.name)}
-                  </div>
-
-                  {/* 分组信息 */}
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div
-                      style={{
-                        fontSize: "16px",
-                        fontWeight: "bold",
-                        marginBottom: "4px",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      {item.name}
-                    </div>
-
-                    <div
-                      style={{
-                        fontSize: "12px",
-                        color: "#666",
-                        marginBottom: "8px",
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      {item.description}
-                    </div>
-
-                    <div
-                      style={{
-                        fontSize: "14px",
-                        color: "#333",
-                        marginBottom: "4px",
-                      }}
-                    >
-                      {item.num}人
-                    </div>
-
-                    {/* RFM数据 */}
-                    {item.RFM > 0 ? (
-                      <div
+                    {item.pic ? (
+                      <img
+                        src={item.pic}
+                        alt={item.name}
                         style={{
-                          fontSize: "12px",
-                          color: "#666",
-                          marginBottom: "4px",
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
                         }}
-                      >
-                        RFM: {item.RFM} | R:{item.R} F:{item.F} M:{item.M}
-                      </div>
+                      />
                     ) : (
-                      <div
+                      <span
                         style={{
-                          fontSize: "12px",
-                          color: "#999",
-                          marginBottom: "4px",
+                          fontSize: 24,
+                          fontWeight: "bold",
+                          color: "#333",
                         }}
                       >
-                        暂无RFM数据
-                      </div>
+                        {getGroupIcon(item.type, item.name)}
+                      </span>
                     )}
-
-                    {/* 标签和创建时间 */}
-                    <div
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                      }}
-                    >
-                      <Tag
-                        color={item.type === 4 ? "purple" : "blue"}
-                        style={{ fontSize: "10px", padding: "2px 6px" }}
-                      >
-                        {item.type === 4 ? "自定义" : "系统分组"}
-                      </Tag>
-                      <div style={{ fontSize: "10px", color: "#999" }}>
-                        {item.createTime}
-                      </div>
-                    </div>
                   </div>
 
-                  {/* 右侧箭头 */}
-                  <div
-                    style={{
-                      marginLeft: "8px",
-                      color: "#ccc",
-                      fontSize: "16px",
-                    }}
-                  >
-                    <RightOutlined />
+                  {/* 右侧仅展示选中字段 */}
+                  <div className={styles.contentArea}>
+                    {/* 标题与人数 */}
+                    <div className={styles.titleRow}>
+                      <div className={styles.title}>{item.name}</div>
+                      <div className={styles.timeTag}>共{item.num}人</div>
+                    </div>
+
+                    {/* RFM 汇总 */}
+                    <div className={styles.ratingRow}>
+                      <span className={styles.rating}>RFM：{item.RFM}</span>
+                      <span className={styles.sales}>
+                        R：{item.R} F：{item.F} M：{item.M}
+                      </span>
+                    </div>
+
+                    {/* 类型与创建时间 */}
+                    <div className={styles.deliveryInfo}>
+                      <span>
+                        类型: {item.type === 0 ? "自定义" : "系统分组"}
+                      </span>
+                      <span>创建:{item.createTime}</span>
+                    </div>
                   </div>
                 </div>
-              </Card>
+              </div>
             ))}
           </div>
         )}