From 1c5a7ddaab7c72748dbca2a95004ce66d6772c2e Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 11 Mar 2026 15:47:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SwipeCards/index.vue         | 42 +++++++--------------
 src/components/SwipeCards/styles/index.scss | 35 +++++++++++++----
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue
index 5c8c7c1..418af30 100644
--- a/src/components/SwipeCards/index.vue
+++ b/src/components/SwipeCards/index.vue
@@ -15,38 +15,24 @@
         <!-- 商品大图部分：自适应剩余空间 -->
         <view class="goods-image-wrapper relative">
           <image class="w-full h-full" :src="card.commodityPhoto" mode="aspectFill"/>
-          <view
-            class="goods-title absolute left-0 right-0 bottom-0 border-box p-12"
-          >
-            <view class="font-size-14 font-500 color-white ellipsis-1">
-              {{ card.commodityName }}
-            </view>
-            <view class="card-price-row color-white">
-              <text class="font-size-11">￥</text>
-              <text class="font-size-14 font-bold">
-                {{ card.specificationPrice }}
-              </text>
-              <text class="font-size-11 ml-2" v-if="card.stockUnitLabel"
-                >/{{ card.stockUnitLabel }}</text
-              >
-            </view>
-          </view>
         </view>
 
-        <!-- 底部相册部分：固定比例或高度 -->
-        <view class="border-box p-12 flex flex-justify-between">
-          <view
-            v-for="(item, index) in card.commodityPhotoList"
-            :key="index"
-            class="album-item relative overflow-hidden bg-f5 rounded-10"
-          >
-            <image :src="item.photoUrl" mode="aspectFill" />
-            <view
-              class="album-title absolute left-0 right-0 bottom-0 color-white font-size-11 font-500 ellipsis-1 flex flex-items-center flex-justify-center"
-            >
-              {{ item.photoName }}
+        <!-- 底部：价格 + 购买按钮 -->
+        <view class="card-footer border-box p-12 flex flex-justify-between flex-items-center">
+          <view class="border-box">
+            <view class="font-size-14 font-500 color-333 ellipsis-1">
+              {{ card.commodityName }}
+            </view>
+            <view class="card-price-row color-333">
+              <text class="font-size-11">￥</text>
+              <text class="font-size-24 font-bold">
+                {{ card.specificationPrice }}
+              </text>
+              <text class="font-size-11 ml-2" v-if="card.stockUnitLabel">/{{ card.stockUnitLabel }}</text>
             </view>
           </view>
+
+          <view class="buy-btn" @click.stop="placeOrderHandle(card)">购买</view>
         </view>
       </view>
     </view>
diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss
index 3362b62..d3bab55 100644
--- a/src/components/SwipeCards/styles/index.scss
+++ b/src/components/SwipeCards/styles/index.scss
@@ -21,13 +21,6 @@
   height: 193px;
 }
 
-.goods-title {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-}
 
 .album-item {
   width: 96px;
@@ -38,3 +31,31 @@
   background: rgba(0, 0, 0, 0.5);
   height: 20px;
 }
+
+/* 底部价格与购买按钮 */
+.card-footer {
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+
+.card-footer .price-left {
+  display: flex;
+  align-items: baseline;
+  color: #171717;
+}
+
+.buy-btn {
+  background-color: $theme-color-500;
+  color: #fff;
+  margin-top: 12px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buy-btn:active {
+  opacity: 0.9;
+}