feat: 商品详情交互开发

pages/goods/index.vue

@@ -1,9 +1,14 @@
 <template>
   <view class="goods-container">
-    <TopNavBar title="商品详情" :fixed="true" />
+    <TopNavBar title="商品详情" />
 
-    <view class="content-wrapper">
-      <ImageSwiper :border-radius="0" :images="goodsData.commodityPhotoList" />
+    <!-- 滚动区域 -->
+    <scroll-view class="content-wrapper" scroll-y>
+      <ImageSwiper
+        :border-radius="0"
+        :height="300"
+        :images="goodsData.commodityPhotoList"
+      />
 
       <view class="goods-content">
         <!-- 商品信息组件 -->
@@ -12,12 +17,16 @@
         <ModuleTitle title="购买须知" />
 
         <zero-markdown-view :markdown="goodsData.commodityTip" :fontSize="14" />
-
-        <!-- 立即抢购 -->
-        <view class="footer">
-          <button class="buy-button" @click="showConfirmPopup">立即抢购</button>
-        </view>
       </view>
+    </scroll-view>
+
+    <!-- 立即抢购 -->
+    <view class="footer">
+      <view class="left">
+        <text class="label">价格：</text>
+        <text class="price">{{ goodsData.commodityPrice || 399 }}</text>
+      </view>
+      <view class="buy-button" @click="showConfirmPopup">立即抢购</view>
     </view>
 
     <!-- 商品确认弹窗 -->