From 4419f125668677bd99f2e72bd8a918234820a72f Mon Sep 17 00:00:00 2001
From: Trae AI <trae@example.com>
Date: Mon, 2 Mar 2026 13:10:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=AF=94=E4=BB=B7=E6=A0=BCui=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goods-detail/goods-detail.js   | 206 +++++++-----
 pages/goods-detail/goods-detail.wxml | 178 ++++-------
 pages/goods-detail/goods-detail.wxss | 455 ++++++++++++++++-----------
 3 files changed, 448 insertions(+), 391 deletions(-)

diff --git a/pages/goods-detail/goods-detail.js b/pages/goods-detail/goods-detail.js
index 604a537..75dc605 100644
--- a/pages/goods-detail/goods-detail.js
+++ b/pages/goods-detail/goods-detail.js
@@ -1365,6 +1365,15 @@ Page({
     initialTouch: null,         // 初始触摸点
     // 对比价格相关状态
     showCompareModal: false,    // 是否显示对比价格弹窗
+    compareStep: 1,             // 当前步骤（1：选择品种，2：选择规格）
+    categoryOptions: ['全部', '绿壳', '粉壳', '褐壳'], // 品种选项
+    categoryIcons: ['🥚', '🥚', '🥚', '🥚'], // 品种图标
+    categoryDescriptions: ['所有品种', '绿壳鸡蛋', '粉壳鸡蛋', '褐壳鸡蛋'], // 品种描述
+    selectedCategoryIndex: 0,    // 选中的品种索引
+    selectedCategory: '',        // 选中的品种
+    selectedSpecIndex: 0,        // 选中的规格索引
+    selectedSpec: null,          // 选中的规格
+    currentSpecifications: [],   // 当前商品的规格列表
     activeTab: 'home',          // 当前激活的选项卡，'home'表示首页数据，'favorite'表示收藏数据
     homeGoods: [],              // 首页商品数据
     favoriteGoods: [],          // 收藏商品数据
@@ -3691,7 +3700,7 @@ Page({
 
   // 对比价格功能：处理按钮点击事件
   onCompareClick: function () {
-    console.log('用户点击了对比价格按钮，准备跳转到对比价格页面');
+    console.log('用户点击了对比价格按钮，准备显示对比价格弹窗');
       
       // 检查用户登录状态
       const openid = wx.getStorageSync('openid');
@@ -3731,110 +3740,135 @@ Page({
         // 即使失败也不影响主流程
       });
       
-      // 检查用户身份证认证状态
-      let idcardstatus = '';
-      const users = wx.getStorageSync('users') || {};
-      const userInfo = wx.getStorageSync('userInfo') || {};
-      
-      if (userId && users[userId] && users[userId].idcardstatus) {
-        idcardstatus = users[userId].idcardstatus;
-      } else if (userInfo.idcardstatus) {
-        idcardstatus = userInfo.idcardstatus;
-      }
-      
-      console.log('用户身份证认证状态:', idcardstatus);
-      
       // 获取当前商品的信息
       const currentGoods = this.data.goodsDetail;
       const currentCategory = currentGoods.category || '';
       const currentSpecifications = currentGoods.weightQuantityData || [];
       
-      // 定义种类选项
-      const categoryOptions = ['全部', '绿壳', '粉壳', '褐壳', '土鸡蛋'];
-      
       // 找到当前商品种类在选项中的索引，默认为0（全部）
       let defaultCategoryIndex = 0;
       if (currentCategory) {
-        const index = categoryOptions.indexOf(currentCategory);
+        const index = this.data.categoryOptions.indexOf(currentCategory);
         if (index !== -1) {
           defaultCategoryIndex = index;
         }
       }
       
-      // 显示种类选择对话框
-      wx.showActionSheet({
-        itemList: categoryOptions,
-        success: (categoryRes) => {
-          const selectedCategoryIndex = categoryRes.tapIndex;
-          const selectedCategory = categoryOptions[selectedCategoryIndex];
-          
-          // 构建规格选择列表
-          const specList = currentSpecifications.map((spec, index) => {
-            return spec.display || spec.weightSpec || `规格${index + 1}`;
+      // 初始化弹窗状态
+      this.setData({
+        showCompareModal: true,
+        compareStep: 1,
+        selectedCategoryIndex: defaultCategoryIndex,
+        selectedCategory: this.data.categoryOptions[defaultCategoryIndex],
+        selectedSpecIndex: 0,
+        selectedSpec: currentSpecifications.length > 0 ? currentSpecifications[0] : null,
+        currentSpecifications: currentSpecifications
+      });
+  },
+  
+  // 选择品种
+  selectCategory: function (e) {
+    const index = e.currentTarget.dataset.index;
+    this.setData({
+      selectedCategoryIndex: index,
+      selectedCategory: this.data.categoryOptions[index]
+    });
+  },
+  
+  // 选择规格
+  selectSpec: function (e) {
+    const index = e.currentTarget.dataset.index;
+    this.setData({
+      selectedSpecIndex: index,
+      selectedSpec: this.data.currentSpecifications[index]
+    });
+  },
+  
+  // 进入下一步
+  nextStep: function () {
+    if (!this.data.selectedCategory) {
+      wx.showToast({
+        title: '请选择品种',
+        icon: 'none'
+      });
+      return;
+    }
+    this.setData({
+      compareStep: 2
+    });
+  },
+  
+  // 返回上一步
+  prevStep: function () {
+    this.setData({
+      compareStep: 1
+    });
+  },
+  
+  // 确认对比
+  confirmCompare: function () {
+    if (!this.data.selectedSpec) {
+      wx.showToast({
+        title: '请选择规格',
+        icon: 'none'
+      });
+      return;
+    }
+    
+    const currentGoods = this.data.goodsDetail;
+    const selectedCategory = this.data.selectedCategory;
+    const selectedSpec = this.data.selectedSpec;
+    
+    // 显示提示信息
+    wx.showToast({
+      title: `已选择${selectedCategory} ${selectedSpec.display}`,
+      icon: 'info',
+      duration: 1500,
+      success: () => {
+        setTimeout(() => {
+          // 关闭弹窗
+          this.setData({
+            showCompareModal: false
           });
           
-          // 显示规格选择对话框
-          wx.showActionSheet({
-            itemList: specList,
-            success: (specRes) => {
-              const selectedSpecIndex = specRes.tapIndex;
-              const selectedSpec = currentSpecifications[selectedSpecIndex];
-              
-              // 显示提示信息
+          // 构建要传递的数据
+          const goodsData = {
+            id: currentGoods.id || currentGoods.productId,
+            name: currentGoods.name || '',
+            price: currentGoods.price || '',
+            imageUrls: currentGoods.imageUrls || [],
+            region: currentGoods.region || '',
+            weightQuantityData: currentGoods.weightQuantityData || [],
+            category: selectedCategory,
+            yolk: currentGoods.yolk || '',
+            sourceType: currentGoods.sourceType || '',
+            supplyStatus: currentGoods.supplyStatus || '',
+            mediaItems: currentGoods.mediaItems || [],
+            frequency: currentGoods.frequency || 0,
+            status: currentGoods.status || 'published',
+            totalStock: currentGoods.totalStock || '充足',
+            selectedSpec: selectedSpec
+          };
+          
+          console.log('准备跳转到对比价格页面，传递的数据:', goodsData);
+          
+          // 跳转到对比价格页面
+          wx.navigateTo({
+            url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`,
+            success: function () {
+              console.log('成功跳转到对比价格页面');
+            },
+            fail: function (error) {
+              console.error('跳转到对比价格页面失败:', error);
               wx.showToast({
-                title: `已选择${selectedCategory} ${selectedSpec.display}`,
-                icon: 'info',
-                duration: 1500,
-                success: () => {
-                  setTimeout(() => {
-                    // 构建要传递的数据
-                    const goodsData = {
-                      id: currentGoods.id || currentGoods.productId,
-                      name: currentGoods.name || '',
-                      price: currentGoods.price || '',
-                      imageUrls: currentGoods.imageUrls || [],
-                      region: currentGoods.region || '',
-                      weightQuantityData: currentGoods.weightQuantityData || [],
-                      category: selectedCategory,
-                      yolk: currentGoods.yolk || '',
-                      sourceType: currentGoods.sourceType || '',
-                      supplyStatus: currentGoods.supplyStatus || '',
-                      mediaItems: currentGoods.mediaItems || [],
-                      frequency: currentGoods.frequency || 0,
-                      status: currentGoods.status || 'published',
-                      totalStock: currentGoods.totalStock || '充足',
-                      selectedSpec: selectedSpec
-                    };
-                    
-                    console.log('准备跳转到对比价格页面，传递的数据:', goodsData);
-                    
-                    // 跳转到对比价格页面
-                    wx.navigateTo({
-                      url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`,
-                      success: function () {
-                        console.log('成功跳转到对比价格页面');
-                      },
-                      fail: function (error) {
-                        console.error('跳转到对比价格页面失败:', error);
-                        wx.showToast({
-                          title: '跳转失败，请稍后重试',
-                          icon: 'none'
-                        });
-                      }
-                    });
-                  }, 1500);
-                }
+                title: '跳转失败，请稍后重试',
+                icon: 'none'
               });
-            },
-            fail: (res) => {
-              console.log('选择规格失败:', res);
             }
           });
-        },
-        fail: (res) => {
-          console.log('选择种类失败:', res);
-        }
-      });
+        }, 1500);
+      }
+    });
   },
   
   // 关闭对比价格弹窗
diff --git a/pages/goods-detail/goods-detail.wxml b/pages/goods-detail/goods-detail.wxml
index 264d60b..a1a54d6 100644
--- a/pages/goods-detail/goods-detail.wxml
+++ b/pages/goods-detail/goods-detail.wxml
@@ -307,137 +307,81 @@
   <!-- 底部弹出层 - 对比价格 -->
   <view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
     <view class="compare-modal-container" catchtap="stopPropagation">
+      <!-- 步骤指示器 -->
+      <view class="compare-step-container">
+        <view class="compare-step-wrapper">
+          <view class="compare-step {{compareStep === 1 ? 'active' : ''}}">
+            <view class="compare-step-circle">{{compareStep === 1 ? '✓' : '1'}}</view>
+            <view class="compare-step-line {{compareStep >= 2 ? 'active' : ''}}"></view>
+          </view>
+          <view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
+            <view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
+            <view class="compare-step-line"></view>
+          </view>
+          <view class="compare-step">
+            <view class="compare-step-circle">3</view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 标题和引导文字 -->
       <view class="compare-modal-header">
-        <text class="compare-modal-title">对比价格</text>
-        <text class="compare-modal-close" bindtap="closeCompareModal">×</text>
+        <text class="compare-modal-title">{{compareStep === 1 ? '选择鸡蛋品种' : '选择鸡蛋规格'}}</text>
+        <text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
       </view>
       
-      <!-- 选项卡 -->
-      <view class="compare-tabs">
-        <view 
-          class="compare-tab {{activeTab === 'home' ? 'active' : ''}}" 
-          bindtap="switchTab" 
-          data-tab="home"
-        >
-          相同规格的同种类型
-        </view>
-        <view 
-          class="compare-tab {{activeTab === 'favorite' ? 'active' : ''}}" 
-          bindtap="switchTab" 
-          data-tab="favorite"
-        >
-          已收藏数据
-        </view>
+      <!-- 已选品种提示区 -->
+      <view wx:if="{{compareStep === 2 && selectedCategory}}" class="compare-selected-category">
+        <text class="compare-selected-icon">✓</text>
+        <text class="compare-selected-text">已选品种：{{selectedCategory}}</text>
       </view>
       
-      <!-- 商品列表 -->
-      <view class="compare-goods-list">
-        <block wx:if="{{activeTab === 'home' && homeGoods.length > 0}}">
-          <view wx:for="{{homeGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
-            <view class="product-image-wrapper">
-              <!-- 视频处理：根据mediaItems中的类型字段判断 -->
-              <video 
-                wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" 
-                class="product-media" 
-                src="{{item.mediaItems[0].url}}" 
-                mode="aspectFit"
-                show-center-play-btn="{{true}}"
-                show-play-btn="{{false}}"
-                controls="{{true}}"
-                autoplay="{{true}}"
-                loop="{{true}}"
-                muted="{{true}}"
-                object-fit="contain"
-                poster="" 
-              ></video>
-              <!-- 图片处理 -->
-              <image 
-                wx:else
-                class="product-media" 
-                src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}" 
-                mode="aspectFill"
-                lazy-load="true"
-              ></image>
-              <!-- 已售空标签 -->
-              <view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
+      <!-- 内容区域 -->
+      <view class="compare-content">
+        <!-- 品种选择列表 -->
+        <block wx:if="{{compareStep === 1}}">
+          <view wx:for="{{categoryOptions}}" wx:key="index" class="compare-option {{selectedCategoryIndex === index ? 'selected' : ''}}" bindtap="selectCategory" data-index="{{index}}">
+            <view class="compare-option-icon">{{categoryIcons[index]}}</view>
+            <view class="compare-option-info">
+              <text class="compare-option-name">{{item}}</text>
+              <text class="compare-option-desc">{{categoryDescriptions[index]}}</text>
             </view>
-            <view class="compare-goods-info">
-              <text class="compare-goods-name">{{item.name}}</text>
-              <view class="compare-goods-spec-quantity">
-                <block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
-                  <view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
-                    {{specItem.display}}
-                    <text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
-                  </view>
-                </block>
-                <block wx:else>
-                  {{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
-                </block>
-              </view>
-              <text class="compare-goods-region-time">
-            {{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间：' + item.formattedDate : ''}}
-          </text>
+            <view class="compare-option-radio {{selectedCategoryIndex === index ? 'selected' : ''}}">
+              <view wx:if="{{selectedCategoryIndex === index}}" class="compare-option-radio-inner"></view>
             </view>
-            <!-- 右侧售空文字 -->
-            <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
           </view>
         </block>
-        <block wx:elif="{{activeTab === 'home' && homeGoods.length === 0}}">
-          <view class="compare-empty">暂无首页数据</view>
-        </block>
         
-        <block wx:if="{{activeTab === 'favorite' && favoriteGoods.length > 0}}">
-          <view wx:for="{{favoriteGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
-            <view class="product-image-wrapper">
-              <!-- 视频处理：根据mediaItems中的类型字段判断 -->
-              <video 
-                wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" 
-                class="product-media" 
-                src="{{item.mediaItems[0].url}}" 
-                mode="aspectFit"
-                show-center-play-btn="{{true}}"
-                show-play-btn="{{false}}"
-                controls="{{true}}"
-                autoplay="{{true}}"
-                loop="{{true}}"
-                muted="{{true}}"
-                object-fit="contain"
-                poster="" 
-              ></video>
-              <!-- 图片处理 -->
-              <image 
-                wx:else
-                class="product-media" 
-                src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}" 
-                mode="aspectFill"
-                lazy-load="true"
-              ></image>
-              <!-- 已售空标签 -->
-              <view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
+        <!-- 规格选择列表 -->
+        <block wx:elif="{{compareStep === 2}}">
+          <view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
+            <view class="compare-option-info spec-info">
+              <text class="compare-option-name">{{item.display || item.weightSpec}}</text>
+              <text class="compare-option-desc">{{item.price ? '价格：¥' + item.price : '价格：暂无'}}</text>
             </view>
-            <view class="compare-goods-info">
-              <text class="compare-goods-name">{{item.name}}</text>
-              <view class="compare-goods-spec-quantity">
-                <block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
-                  <view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
-                    {{specItem.display}}
-                    <text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
-                  </view>
-                </block>
-                <block wx:else>
-                  {{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
-                </block>
-              </view>
-              <text class="compare-goods-region-time">
-                {{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间：' + item.formattedDate : ''}}
-              </text>
+            <view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
+              <view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
             </view>
-            <!-- 右侧售空文字 -->
-            <view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
           </view>
         </block>
-        <block wx:elif="{{activeTab === 'favorite' && favoriteGoods.length === 0}}">
-          <view class="compare-empty">暂无收藏商品</view>
+      </view>
+      
+      <!-- 底部按钮区域 -->
+      <view class="compare-modal-footer">
+        <block wx:if="{{compareStep === 1}}">
+          <button class="compare-next-button" bindtap="nextStep">
+            下一步
+          </button>
+        </block>
+        <block wx:elif="{{compareStep === 2}}">
+          <view class="compare-footer-buttons">
+            <button class="compare-back-button" bindtap="prevStep">
+              返回
+            </button>
+            <button class="compare-confirm-button" bindtap="confirmCompare">
+              确认
+            </button>
+          </view>
         </block>
       </view>
     </view>
diff --git a/pages/goods-detail/goods-detail.wxss b/pages/goods-detail/goods-detail.wxss
index d8ccdbc..1b0c967 100644
--- a/pages/goods-detail/goods-detail.wxss
+++ b/pages/goods-detail/goods-detail.wxss
@@ -834,21 +834,20 @@ video.slider-media .wx-video-volume-icon {
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
-  align-items: flex-end;
+  align-items: center;
   z-index: 9999;
   animation: fadeIn 0.3s ease-out;
 }
 
 .compare-modal-container {
-  width: 100%;
+  width: 340px;
   background-color: #fff;
-  border-top-left-radius: 32rpx;
-  border-top-right-radius: 32rpx;
-  padding-bottom: 20rpx;
-  max-height: 70vh;
+  border-radius: 20px;
+  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
   animation: slideUp 0.3s ease-out;
   display: flex;
   flex-direction: column;
+  max-height: 560px;
 }
 
 @keyframes fadeIn {
@@ -869,6 +868,268 @@ video.slider-media .wx-video-volume-icon {
   }
 }
 
+/* 步骤指示器 */
+.compare-step-container {
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compare-step-wrapper {
+  width: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.compare-step {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.compare-step-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 500;
+  background-color: #E5E7EB;
+  color: #9CA3AF;
+  z-index: 1;
+}
+
+.compare-step.active .compare-step-circle {
+  background-color: #165DFF;
+  color: #FFFFFF;
+}
+
+.compare-step-line {
+  flex: 1;
+  height: 2px;
+  background-color: #E5E7EB;
+  margin: 0 12px;
+}
+
+.compare-step-line.active {
+  background-color: #165DFF;
+}
+
+/* 标题和引导文字 */
+.compare-modal-header {
+  padding: 0 24px 24px;
+  text-align: center;
+}
+
+.compare-modal-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #1A1A1A;
+  line-height: 24px;
+  margin-bottom: 4px;
+}
+
+.compare-modal-subtitle {
+  font-size: 14px;
+  font-weight: 400;
+  color: #666666;
+  line-height: 20px;
+}
+
+/* 已选品种提示区 */
+.compare-selected-category {
+  width: 292px;
+  height: 48px;
+  background-color: #F0F7FF;
+  border-radius: 12px;
+  margin: 0 24px 16px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.compare-selected-icon {
+  font-size: 20px;
+  color: #165DFF;
+  margin-right: 8px;
+}
+
+.compare-selected-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #165DFF;
+  line-height: 20px;
+}
+
+/* 内容区域 */
+.compare-content {
+  flex: 1;
+  padding: 0 24px 24px;
+  overflow-y: auto;
+}
+
+/* 选项样式 */
+.compare-option {
+  height: 80px;
+  background-color: #FFFFFF;
+  border: 2px solid #E5E7EB;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  transition: all 0.3s ease;
+}
+
+.compare-option.selected {
+  border-color: #165DFF;
+  background-color: #F0F7FF;
+}
+
+.compare-option-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #F0F7FF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  margin-right: 12px;
+}
+
+.compare-option-info {
+  flex: 1;
+}
+
+.compare-option-info.spec-info {
+  margin-left: 0;
+}
+
+.compare-option-name {
+  font-size: 16px;
+  font-weight: 400;
+  color: #666666;
+  line-height: 22px;
+  margin-bottom: 4px;
+}
+
+.compare-option.selected .compare-option-name {
+  font-weight: 500;
+  color: #1A1A1A;
+}
+
+.compare-option-desc {
+  font-size: 12px;
+  font-weight: 400;
+  color: #999999;
+  line-height: 16px;
+}
+
+.compare-option-radio {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #D1D5DB;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.compare-option-radio.selected {
+  border-color: #165DFF;
+}
+
+.compare-option-radio-inner {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #165DFF;
+}
+
+/* 底部按钮区域 */
+.compare-modal-footer {
+  padding: 0 24px 24px;
+}
+
+.compare-next-button {
+  width: 292px;
+  height: 44px;
+  background-color: #165DFF;
+  color: #FFFFFF;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  margin: 0;
+}
+
+.compare-next-button:active {
+  background-color: #0E47D9;
+  transform: scale(0.98);
+}
+
+.compare-footer-buttons {
+  display: flex;
+  gap: 12px;
+  width: 292px;
+}
+
+.compare-back-button {
+  flex: 1;
+  height: 44px;
+  background-color: #FFFFFF;
+  color: #4B5563;
+  border: 1px solid #D1D5DB;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  margin: 0;
+}
+
+.compare-back-button:active {
+  background-color: #F9FAFB;
+  transform: scale(0.98);
+}
+
+.compare-confirm-button {
+  flex: 1;
+  height: 44px;
+  background-color: #165DFF;
+  color: #FFFFFF;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  margin: 0;
+}
+
+.compare-confirm-button:active {
+  background-color: #0E47D9;
+  transform: scale(0.98);
+}
+
 /* 内部信息样式 */
 .internal-info {
   margin: 8px 16px;
@@ -996,188 +1257,6 @@ video.slider-media .wx-video-volume-icon {
   font-weight: 500;
 }
 
-.compare-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24rpx 32rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-  position: relative;
-}
-
-.compare-modal-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #222;
-  text-align: center;
-  flex: 1;
-}
-
-.compare-modal-close {
-  font-size: 48rpx;
-  color: #999;
-  width: 60rpx;
-  height: 60rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-}
-
-.compare-modal-close:active {
-  background-color: #f0f0f0;
-  transform: scale(0.9);
-}
-
-.compare-tabs {
-  display: flex;
-  background-color: #f8f9fa;
-  padding: 12rpx;
-  border-radius: 0;
-}
-
-.compare-tab {
-  flex: 1;
-  text-align: center;
-  padding: 16rpx 0;
-  font-size: 32rpx;
-  color: #666;
-  border-radius: 12rpx;
-  transition: all 0.3s ease;
-  font-weight: 500;
-}
-
-.compare-tab.active {
-  background-color: #fff;
-  color: #4a90e2;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  font-weight: bold;
-}
-
-.compare-goods-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12rpx;
-}
-
-.compare-goods-item {
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding: 12rpx;
-  margin-bottom: 12rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  border: 1rpx solid #f0f0f0;
-}
-
-.compare-goods-item:active {
-  transform: translateY(2rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
-}
-
-.compare-goods-image {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 10rpx;
-  margin-right: 12rpx;
-  object-fit: cover;
-  background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
-}
-
-/* 视频和图片容器样式 */
-.product-image-wrapper {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 10rpx;
-  margin-right: 12rpx;
-  overflow: hidden;
-  position: relative;
-  background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
-}
-
-/* 视频和图片样式 */
-.product-media {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  object-fit: cover;
-}
-
-.compare-goods-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.compare-goods-name {
-  font-size: 32rpx;
-  color: #222;
-  font-weight: 600;
-  line-height: 1.3;
-  margin-bottom: 4rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.compare-goods-spec {
-  font-size: 28rpx;
-  color: #666;
-  margin-bottom: 4rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.compare-goods-quantity {
-  font-size: 28rpx;
-  color: #666;
-  margin-bottom: 4rpx;
-}
-
-.compare-goods-price {
-  font-size: 36rpx;
-  color: #ff4d4f;
-  font-weight: bold;
-  margin-bottom: 4rpx;
-}
-
-.compare-goods-region {
-  font-size: 26rpx;
-  color: #999;
-}
-
-.compare-goods-spec-quantity {
-  font-size: 28rpx;
-  color: #666;
-  line-height: 1.1;
-  margin: 2rpx 0;
-}
-
-.compare-goods-region-time {
-  font-size: 26rpx;
-  color: #999;
-  line-height: 1.1;
-  margin-top: 2rpx;
-}
-
-.compare-empty {
-  text-align: center;
-  padding: 80rpx 0;
-  color: #999;
-  font-size: 32rpx;
-}
-
 /* 修复样式冲突 */
 .goods-detail-page {
   position: relative;