From dbc5edb239359c645214ad28678ccf18d4f53e0e Mon Sep 17 00:00:00 2001
From: lq <workerqi@163.com>
Date: Wed, 17 Dec 2025 12:45:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85UI?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=81=E6=8F=90=E7=A4=BA=E5=A2=9E=E5=BC=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/home.vue              |  20 +-
 subPackages/product/product.vue  |  66 +--
 subPackages/product/symptoms.vue | 826 ++++++++++++++-----------------
 3 files changed, 412 insertions(+), 500 deletions(-)

diff --git a/pages/home/home.vue b/pages/home/home.vue
index 38897e6..e50abc1 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -106,7 +106,7 @@
 
     <!-- 药店模式：热销药品标题 -->
     <view v-if="storeType === '1'" class="doctor_list" @click="golist(3)">
-      热销药品
+      热销商品
       <view class="info">
         更多 <text class="iconfont icon-jiantou1"></text>
       </view>
@@ -133,13 +133,13 @@
                   <text class="currency">¥</text>
                   <text class="price">{{item.price || (item.drug.drugStoreDrug ? item.drug.drugStoreDrug.price : '0.00')}}</text>
                 </view>
-                <view class="buy-btn" @click.stop="buyProduct(item)">购买</view>
+                <view class="buy-btn" @click.stop="goProductDetail(item)">购买</view>
               </view>
             </view>
           </view>
         </view>
       </view>
-      
+
       <!-- 处方药热销 -->
       <view v-if="topProducts.prescription && topProducts.prescription.length > 0" class="category-section">
         <view class="category-title">处方药</view>
@@ -159,13 +159,13 @@
                   <text class="currency">¥</text>
                   <text class="price">{{item.price || (item.drug.drugStoreDrug ? item.drug.drugStoreDrug.price : '0.00')}}</text>
                 </view>
-                <view class="buy-btn" @click.stop="buyProduct(item)">购买</view>
+                <view class="buy-btn" @click.stop="goProductDetail(item)">购买</view>
               </view>
             </view>
           </view>
         </view>
       </view>
-      
+
       <!-- 保健食品热销 -->
       <view v-if="topProducts.health_food && topProducts.health_food.length > 0" class="category-section">
         <view class="category-title">保健食品</view>
@@ -185,7 +185,7 @@
                   <text class="currency">¥</text>
                   <text class="price">{{item.price || (item.drug.drugStoreDrug ? item.drug.drugStoreDrug.price : '0.00')}}</text>
                 </view>
-                <view class="buy-btn" @click.stop="buyProduct(item)">购买</view>
+                <view class="buy-btn" @click.stop="goProductDetail(item)">购买</view>
               </view>
             </view>
           </view>
@@ -763,21 +763,21 @@ export default {
   // 4. 药店模式 - 分类热销商品容器
   .top-products-container {
     padding: 0 20rpx;
-    
+
     .category-section {
       margin-bottom: 40rpx;
-      
+
       .category-title {
         font-size: 32rpx;
         font-weight: bold;
         color: #232323;
         margin-bottom: 20rpx;
         padding-left: 20rpx;
-        border-left: 6rpx solid #4175EE;
+        //border-left: 6rpx solid #4175EE;
       }
     }
   }
-  
+
   // 4. 药店模式 - 药品列表容器
   .product-list-container {
     padding: 0 20rpx;
diff --git a/subPackages/product/product.vue b/subPackages/product/product.vue
index 1456c43..6db2bde 100644
--- a/subPackages/product/product.vue
+++ b/subPackages/product/product.vue
@@ -2,36 +2,40 @@
   <view class="container">
     <!-- 顶部搜索栏：保持优化后的结构，但背景色微调融入原风格 -->
     <view class="search-sticky">
-      <view class="search-section">
-        <!-- 类目筛选下拉 -->
-        <view class="category-filter">
-          <u-dropdown>
-            <u-dropdown-item 
-              v-model="selectedCategory" 
-              title="类目筛选" 
-              :options="categoryOptions" 
-              @change="onCategoryChange">
-            </u-dropdown-item>
-          </u-dropdown>
-        </view>
-        <!-- 搜索组件配置 -->
-        <u-search
-            v-model="searchKeyword"
-            placeholder="搜索药品 / 症状 / 品牌"
-            :show-action="false"
-            bg-color="#F5F7FA"
-            placeholder-color="#9CA3AF"
-            shape="round"
-            height="72"
-            @input="handleSearch"
-            @search="handleSearch"
-            @clear="clearSearch"
-        >
-          <template v-slot:icon>
-            <u-icon name="search" color="#9CA3AF" size="32"></u-icon>
-          </template>
-        </u-search>
-      </view>
+
+      <!-- 搜索组件配置 -->
+      <u-search
+          v-model="searchKeyword"
+          placeholder="搜索药品 / 症状 / 品牌"
+          :show-action="false"
+          bg-color="#F5F7FA"
+          placeholder-color="#9CA3AF"
+          shape="round"
+          height="72"
+          @input="handleSearch"
+          @search="handleSearch"
+          @clear="clearSearch"
+      >
+        <template v-slot:icon>
+          <u-icon name="search" color="#9CA3AF" size="32"></u-icon>
+        </template>
+      </u-search>
+    </view>
+    <view class="search-sticky">
+      <u-dropdown>
+        <u-dropdown-item
+            v-model="selectedCategory"
+            title="类目筛选"
+            :options="categoryOptions"
+            @change="onCategoryChange">
+        </u-dropdown-item>
+        <u-dropdown-item
+            title=""
+        </u-dropdown-item>
+        <u-dropdown-item
+            title=""
+        </u-dropdown-item>
+      </u-dropdown>
     </view>
 
     <!-- 商品列表区域 -->
@@ -393,7 +397,7 @@ export default {
     
     .category-filter {
       flex-shrink: 0;
-      width: 160rpx;
+      width: 200rpx;
     }
   }
 }
diff --git a/subPackages/product/symptoms.vue b/subPackages/product/symptoms.vue
index 9eb0a4c..4d8f126 100644
--- a/subPackages/product/symptoms.vue
+++ b/subPackages/product/symptoms.vue
@@ -1,14 +1,14 @@
 <template>
   <view class="container">
-    <!-- 商品图片轮播 -->
+    <!-- 1. 顶部轮播图 -->
     <view class="swiper-section">
       <swiper
           class="swiper"
           indicator-dots
           autoplay
           circular
-          indicator-color="rgba(255,255,255,0.6)"
-          indicator-active-color="#4175EE"
+          indicator-color="rgba(0,0,0,0.1)"
+          indicator-active-color="#2B85E4"
       >
         <swiper-item v-for="(img, index) in productImages" :key="index">
           <image
@@ -21,57 +21,74 @@
       </swiper>
     </view>
 
-    <!-- 商品基本信息 -->
+    <!-- 2. 核心信息区 -->
     <view class="basic-info">
-      <view class="price-section">
-        <text class="current-price">¥{{ productPrice }}</text>
-        <text class="original-price" v-if="productDetail.daijian_price">
-          ¥{{ productDetail.daijian_price }}
-        </text>
-        <!-- 优化标签颜色：使用医疗蓝或标准的警告色 -->
-        <view class="sales-tag" :class="productDetail.is_otc === 0 ? 'tag-rx' : 'tag-otc'">
-          <text>{{ productDetail.is_otc === 0 ? '处方药' : 'OTC 非处方药' }}</text>
+      <!-- 价格与标签行 -->
+      <view class="price-row">
+        <view class="price-left">
+          <text class="symbol">¥</text>
+          <text class="amount">{{ productPrice }}</text>
+          <text class="old-price" v-if="productDetail.daijian_price">¥{{ productDetail.daijian_price }}</text>
+        </view>
+        <!-- 优化点：根据 type 判断标签显示逻辑 -->
+        <!-- 情况1：type === 3 为保健食品，显示特定标签 -->
+        <view class="tag-capsule type-health" v-if="productDetail.type == 3">
+          <text class="tag-text">保健食品</text>
+        </view>
+        <!-- 情况2：其他（如 type === 2 西药），走 OTC/Rx 逻辑 -->
+        <view class="tag-capsule" :class="productDetail.is_otc === 0 ? 'type-rx' : 'type-otc'" v-else>
+          <text class="tag-text">{{ productDetail.is_otc === 0 ? 'Rx 处方药' : 'OTC 非处方药' }}</text>
         </view>
       </view>
 
-      <view class="product-name">{{ productDetail.drug_name }}</view>
-      <view class="product-subtitle">{{ productDetail.drug_alias || productDetail.drug_name }}</view>
+      <view class="title">{{ productDetail.drug_name }}</view>
+      <view class="sub-title" v-if="productDetail.drug_alias">{{ productDetail.drug_alias }}</view>
 
-      <view class="meta-info">
-        <view class="meta-item">
-          <u-icon name="file-text" size="28" color="#999"></u-icon>
-          <text>规格：{{ productDetail.specification || '暂无' }}</text>
+      <!-- 规格条 -->
+      <view class="spec-bar">
+        <view class="spec-item">
+          <text class="label">规格</text>
+          <text class="val">{{ productDetail.specification || '标准规格' }}</text>
+        </view>
+        <view class="spec-item" v-if="productDetail.guozi_no">
+          <text class="label">批准文号</text>
+          <text class="val">{{ productDetail.guozi_no }}</text>
         </view>
       </view>
     </view>
 
-    <!-- 物流提示信息 -->
-    <view class="order-text-tip" v-if="orderText">
+    <!-- 3. 物流提示 -->
+    <view class="logistics-tip" v-if="orderText">
+      <u-icon name="car-fill" color="#2B85E4" size="34" style="margin-right:12rpx"></u-icon>
       <text>{{ orderText }}</text>
     </view>
 
-    <!-- 功效与用法：保健食品不显示 -->
-    <view class="detail-section" v-if="productDetail.category_type !== 'health_food'">
-      <view class="section-title">
-        <text>功效主治</text>
+    <!-- 4. 功效与用法 (卡片式布局 + 优化标题) -->
+    <view class="info-card" v-if="productDetail.category_type !== 'health_food'">
+      <!-- 优化点：医疗风格标题 -->
+      <view class="section-title-modern">
+        <view class="indicator"></view>
+        <text>功能主治</text>
       </view>
-      <view class="section-content">
-        {{ productDetail.function || productDetail.indications || '暂无相关信息' }}
+      <view class="card-body">
+        {{ productDetail.function || productDetail.indications || '暂无详细信息，请以说明书为准' }}
       </view>
     </view>
 
-    <view class="detail-section">
-      <view class="section-title">
+    <view class="info-card">
+      <view class="section-title-modern">
+        <view class="indicator"></view>
         <text>用法用量</text>
       </view>
-      <view class="section-content">
-        {{ productDetail.usage || '暂无相关信息' }}
+      <view class="card-body">
+        {{ productDetail.usage || '请遵医嘱或参照说明书' }}
       </view>
     </view>
 
-    <!-- 说明书 -->
-    <view class="detail-section">
-      <view class="section-title">
+    <!-- 说明书入口 -->
+    <view class="info-card">
+      <view class="section-title-modern">
+        <view class="indicator"></view>
         <text>说明书</text>
       </view>
       <view class="instruction-content">
@@ -84,28 +101,59 @@
         />
         <view v-else class="no-instruction">
           <u-icon name="file-text" size="60" color="#999"></u-icon>
-          <text>暂无说明书，详见产品内部的说明书</text>
+          <text>详见产品包装内部说明书</text>
         </view>
       </view>
     </view>
 
-    <!-- 商品介绍图 - 淘宝风格无缝布局 -->
-    <view class="detail-section introduction-section" v-if="introductionImages.length > 0">
-      <view class="section-title">
-        <text>商品介绍</text>
+    <!-- 5. 商品详情图 (淘宝式无缝加载 + 优化标题) -->
+    <view class="detail-images-wrapper" v-if="introductionImages.length > 0">
+      <view class="section-divider-modern">
+        <text class="text">商品详情</text>
       </view>
-      <view class="introduction-images">
+      <view class="image-list">
         <image
             v-for="(img, idx) in introductionImages"
             :key="idx"
-            class="introduction-image"
+            class="seamless-img"
             :src="img"
             mode="widthFix"
+            lazy-load
             @click="previewIntroductionImage(idx)"
         />
       </view>
     </view>
 
+    <!-- 占位符，防止底部操作栏遮挡内容 -->
+    <view class="footer-placeholder"></view>
+
+    <!-- 底部操作栏 -->
+    <view class="footer-bar safe-area-inset-bottom">
+      <view class="icons-area">
+        <view class="icon-item" @click="goBack">
+          <u-icon name="home" size="40" color="#606266"></u-icon>
+          <text>首页</text>
+        </view>
+        <view class="icon-item" @click="goToCart">
+          <view class="icon-rel">
+            <u-icon name="shopping-cart" size="40" color="#606266"></u-icon>
+            <!-- 徽标 -->
+            <view class="badge-custom" v-if="cartCount > 0">{{ cartCount > 99 ? '99+' : cartCount }}</view>
+          </view>
+          <text>购物车</text>
+        </view>
+      </view>
+
+      <view class="btns-area">
+        <button class="btn btn-cart" @click="showCartPopup = true">加入购物车</button>
+        <button class="btn btn-buy" @click="handleBuyNow">
+          {{ productDetail.is_otc === 0 && productDetail.type == 2 ? '提交预定' : '立即购买' }}
+        </button>
+      </view>
+    </view>
+
+    <!-- === 以下为原有弹窗代码 (保留完整逻辑) === -->
+
     <!-- 购物车弹窗 -->
     <u-popup
         v-model="showCartPopup"
@@ -114,41 +162,26 @@
         :closeable="true"
         @close="closeCartPopup"
     >
-      <view class="cart-popup safe-area-bottom">
-        <view class="popup-header">
-          <text class="popup-title">选择购买数量</text>
-        </view>
+      <view class="popup-wrapper safe-area-bottom">
+        <view class="popup-header-title">选择购买数量</view>
 
-        <view class="product-info">
-          <image
-              class="product-image"
-              :src="productDetail.image"
-              mode="aspectFill"
-          ></image>
-          <view class="product-details">
-            <text class="product-name">{{ productDetail.drug_name }}</text>
-            <text class="product-spec">{{ productDetail.specification || '暂无规格' }}</text>
-            <view class="product-price">¥{{ productPrice }}</view>
+        <view class="product-info-row">
+          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
+          <view class="p-info">
+            <view class="p-name">{{ productDetail.drug_name }}</view>
+            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
+            <view class="p-price">¥{{ productPrice }}</view>
           </view>
         </view>
 
-        <view class="quantity-selector">
-          <text class="quantity-label">购买数量</text>
-          <view class="quantity-controls">
-            <u-number-box
-                v-model="cartQuantity"
-                :min="1"
-                :max="999"
-                integer
-                :step="1"
-                :disabled-input="false"
-            ></u-number-box>
-          </view>
+        <view class="quantity-row">
+          <text class="label">购买数量</text>
+          <u-number-box v-model="cartQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
         </view>
 
         <view class="popup-actions">
-          <button class="cancel-btn" @click="closeCartPopup">取消</button>
-          <button class="confirm-btn" @click="addToCart">加入购物车</button>
+          <button class="btn-cancel" @click="closeCartPopup">取消</button>
+          <button class="btn-confirm" @click="addToCart">确定</button>
         </view>
       </view>
     </u-popup>
@@ -161,41 +194,26 @@
         :closeable="true"
         @close="closeBuyPopup"
     >
-      <view class="cart-popup safe-area-bottom">
-        <view class="popup-header">
-          <text class="popup-title">选择购买数量</text>
-        </view>
+      <view class="popup-wrapper safe-area-bottom">
+        <view class="popup-header-title">选择购买数量</view>
 
-        <view class="product-info">
-          <image
-              class="product-image"
-              :src="productDetail.image"
-              mode="aspectFill"
-          ></image>
-          <view class="product-details">
-            <text class="product-name">{{ productDetail.drug_name }}</text>
-            <text class="product-spec">{{ productDetail.specification || '暂无规格' }}</text>
-            <view class="product-price">¥{{ productPrice }}</view>
+        <view class="product-info-row">
+          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
+          <view class="p-info">
+            <view class="p-name">{{ productDetail.drug_name }}</view>
+            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
+            <view class="p-price">¥{{ productPrice }}</view>
           </view>
         </view>
 
-        <view class="quantity-selector">
-          <text class="quantity-label">购买数量</text>
-          <view class="quantity-controls">
-            <u-number-box
-                v-model="buyQuantity"
-                :min="1"
-                :max="999"
-                integer
-                :step="1"
-                :disabled-input="false"
-            ></u-number-box>
-          </view>
+        <view class="quantity-row">
+          <text class="label">购买数量</text>
+          <u-number-box v-model="buyQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
         </view>
 
         <view class="popup-actions">
-          <button class="cancel-btn" @click="closeBuyPopup">取消</button>
-          <button class="confirm-btn" @click="buyNowConfirm">立即下单</button>
+          <button class="btn-cancel" @click="closeBuyPopup">取消</button>
+          <button class="btn-confirm" @click="buyNowConfirm">立即下单</button>
         </view>
       </view>
     </u-popup>
@@ -208,73 +226,50 @@
         :closeable="true"
         @close="closePrescriptionFormPopup"
     >
-      <view class="prescription-popup safe-area-bottom">
-        <view class="popup-header">
-          <text class="popup-title">请填写用药信息</text>
-        </view>
+      <view class="popup-wrapper safe-area-bottom">
+        <view class="popup-header-title">请填写用药信息</view>
 
-        <view class="product-info">
-          <image
-              class="product-image"
-              :src="productDetail.image"
-              mode="aspectFill"
-          ></image>
-          <view class="product-details">
-            <text class="product-name">{{ productDetail.drug_name }}</text>
-            <text class="product-spec">{{ productDetail.specification || '暂无规格' }}</text>
-            <view class="product-price">¥{{ productPrice }}</view>
+        <view class="product-info-row">
+          <image class="p-img" :src="productDetail.image" mode="aspectFill"></image>
+          <view class="p-info">
+            <view class="p-name">{{ productDetail.drug_name }}</view>
+            <view class="p-spec">{{ productDetail.specification || '暂无规格' }}</view>
+            <view class="p-price">¥{{ productPrice }}</view>
           </view>
         </view>
 
-        <view class="quantity-selector">
-          <text class="quantity-label">购买数量</text>
-          <view class="quantity-controls">
-            <u-number-box
-                v-model="prescriptionQuantity"
-                :min="1"
-                :max="999"
-                integer
-                :step="1"
-                :disabled-input="false"
-            ></u-number-box>
-          </view>
+        <view class="quantity-row">
+          <text class="label">购买数量</text>
+          <u-number-box v-model="prescriptionQuantity" :min="1" :max="999" integer :step="1"></u-number-box>
         </view>
 
         <u-form :model="prescriptionFormData" ref="prescriptionForm">
-          <view class="form-item-wrapper">
-            <u-form-item label="是否就诊过" prop="hasVisited" label-width="200">
-              <u-radio-group v-model="prescriptionFormData.hasVisited">
-                <u-radio name="1" active-color="#4175EE" style="margin-right: 60rpx;">是</u-radio>
-                <u-radio name="0" active-color="#4175EE">否</u-radio>
-              </u-radio-group>
-            </u-form-item>
-          </view>
-
-          <view class="form-item-wrapper">
-            <u-form-item label="是否用过此药" prop="hasUsedDrug" label-width="200">
-              <u-radio-group v-model="prescriptionFormData.hasUsedDrug">
-                <u-radio name="1" active-color="#4175EE" style="margin-right: 60rpx;">是</u-radio>
-                <u-radio name="0" active-color="#4175EE">否</u-radio>
-              </u-radio-group>
-            </u-form-item>
-          </view>
-
-          <view class="form-item-wrapper">
-            <u-form-item label="患病信息" prop="illnessInfo" label-width="200">
-              <u-input
-                  v-model="prescriptionFormData.illnessInfo"
-                  type="select"
-                  placeholder="请选择患病信息"
-                  @click="showIllnessPicker = true"
-                  disabled
-              />
-            </u-form-item>
-          </view>
+          <u-form-item label="是否就诊过" prop="hasVisited" label-width="200">
+            <u-radio-group v-model="prescriptionFormData.hasVisited">
+              <u-radio name="1" active-color="#2B85E4" style="margin-right: 40rpx;">是</u-radio>
+              <u-radio name="0" active-color="#2B85E4">否</u-radio>
+            </u-radio-group>
+          </u-form-item>
+          <u-form-item label="是否用过此药" prop="hasUsedDrug" label-width="200">
+            <u-radio-group v-model="prescriptionFormData.hasUsedDrug">
+              <u-radio name="1" active-color="#2B85E4" style="margin-right: 40rpx;">是</u-radio>
+              <u-radio name="0" active-color="#2B85E4">否</u-radio>
+            </u-radio-group>
+          </u-form-item>
+          <u-form-item label="患病信息" prop="illnessInfo" label-width="200">
+            <u-input
+                v-model="prescriptionFormData.illnessInfo"
+                type="select"
+                placeholder="请选择患病信息"
+                @click="showIllnessPicker = true"
+                disabled
+            />
+          </u-form-item>
         </u-form>
 
-        <view class="popup-actions">
-          <button class="cancel-btn" @click="closePrescriptionFormPopup">取消</button>
-          <button class="confirm-btn" @click="submitPrescriptionForm">提交信息</button>
+        <view class="popup-actions" style="margin-top:40rpx;">
+          <button class="btn-cancel" @click="closePrescriptionFormPopup">取消</button>
+          <button class="btn-confirm" @click="submitPrescriptionForm">提交信息</button>
         </view>
       </view>
     </u-popup>
@@ -287,52 +282,16 @@
         range-key="label"
         @confirm="onIllnessConfirm"
         :mask-close-able="true"
-        confirm-color="#4175EE"
+        confirm-color="#2B85E4"
     ></u-picker>
 
-    <!-- 底部操作栏：关键优化点 -->
-    <view class="footer">
-      <view class="footer-left">
-        <!-- 购物车入口：增加徽标 Badge -->
-        <view class="action-item" @click="goToCart">
-          <view class="icon-wrap">
-            <u-icon name="shopping-cart" size="40" color="#666"></u-icon>
-            <!-- 修复购物车徽标位置，使用绝对定位的u-badge或自定义样式 -->
-            <u-badge
-                :count="cartCount"
-                type="error"
-                size="mini"
-                :offset="[-8, -8]"
-                absolute
-                v-if="cartCount > 0"
-            ></u-badge>
-          </view>
-          <text class="action-text">购物车</text>
-        </view>
-        <view class="action-item" @click="goBack">
-          <view class="icon-wrap">
-            <u-icon name="home" size="40" color="#666"></u-icon>
-          </view>
-          <text class="action-text">首页</text>
-        </view>
-      </view>
-
-      <!-- 按钮组：优化配色 -->
-      <view class="footer-right">
-        <!-- 加入购物车：浅色/辅助色 -->
-        <button class="add-cart-btn" @click="showCartPopup = true">加入购物车</button>
-        <!-- 立即购买：主品牌色 -->
-        <button class="buy-now-btn" @click="handleBuyNow">
-          {{ productDetail.is_otc === 0 ? '立即咨询' : '立即购买' }}
-        </button>
-      </view>
-    </view>
+    <u-toast ref="uToast" />
   </view>
 </template>
 
 <script>
-// 保持脚本逻辑不变，仅确保API引用正确
-import {getOrderTextApi, getStoreDrugDetailApi} from "@/request/api/product";
+// 完整引入原有API
+import { getOrderTextApi, getStoreDrugDetailApi } from "@/request/api/product";
 import { genOrderApi } from "@/request/api/order";
 import { getCartCountsApi, saveCartApi } from "@/request/api/cart";
 
@@ -341,6 +300,7 @@ export default {
     return {
       productDetail: {
         id: '',
+        type: 0, // 新增：药品类型 (2:西药, 3:保健食品)
         drug_name: '',
         drug_alias: '',
         image: '',
@@ -515,7 +475,7 @@ export default {
       })
     },
     handleBuyNow() {
-      if (this.productDetail.is_otc === 0) {
+      if (this.productDetail.is_otc === 0 && this.productDetail.type == 2) {
         this.showPrescriptionFormPopup = true;
       } else {
         this.showBuyPopup = true;
@@ -597,360 +557,308 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  background-color: #f5f8ff;
+  background-color: #F5F7FA;
   min-height: 100vh;
-  // 底部留白 = 固定操作栏高度 + 安全距离 + 额外间距
-  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
-  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
 }
 
-// 轮播图区域
+/* 1. 轮播图 */
 .swiper-section {
-  position: relative;
-  height: 500rpx;
-  overflow: hidden;
-
-  .swiper {
-    width: 100%;
-    height: 100%;
-  }
-
-  .swiper-image {
-    width: 100%;
-    height: 100%;
-  }
+  height: 750rpx;
+  background: #fff;
+  .swiper, .swiper-image { width: 100%; height: 100%; }
 }
 
-// 基本信息区域
+/* 2. 基础信息区 */
 .basic-info {
   background: #fff;
   padding: 30rpx;
   margin-bottom: 20rpx;
+  border-radius: 0 0 24rpx 24rpx;
 
-  .price-section {
+  .price-row {
     display: flex;
-    align-items: center;
-    margin-bottom: 20rpx;
+    justify-content: space-between;
+    align-items: center; // 垂直居中对齐
+    margin-bottom: 24rpx;
 
-    .current-price {
-      font-size: 48rpx;
-      font-weight: bold;
-      color: #ff4d4f;
-      margin-right: 20rpx;
+    .price-left {
+      color: #FF4D4F;
+      display: flex;
+      align-items: baseline;
+      .symbol { font-size: 28rpx; font-weight: bold; margin-right: 4rpx; }
+      .amount { font-size: 56rpx; font-weight: 800; font-family: 'DIN Alternate', sans-serif; line-height: 1; }
+      .old-price { font-size: 24rpx; color: #999; text-decoration: line-through; margin-left: 16rpx; }
     }
 
-    .original-price {
-      font-size: 28rpx;
-      color: #999;
-      text-decoration: line-through;
-      margin-right: 20rpx;
-    }
-
-    .sales-tag {
-      padding: 4rpx 16rpx;
-      border-radius: 20rpx;
-      font-size: 22rpx;
-
-      &.tag-rx {
-        background: #ffe5e5;
-        color: #ff4d4f;
-        border: 1px solid #ff4d4f;
-      }
-
-      &.tag-otc {
-        background: #e6f7ff;
-        color: #00B578;
-        border: 1px solid #00B578;
-      }
-    }
-  }
-
-  .product-name {
-    font-size: 36rpx;
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 10rpx;
-    line-height: 1.4;
-  }
-
-  .product-subtitle {
-    font-size: 28rpx;
-    color: #666;
-    margin-bottom: 20rpx;
-  }
-
-  .meta-info {
-    .meta-item {
+    // 优化：胶囊式标签
+    .tag-capsule {
       display: flex;
       align-items: center;
-      font-size: 26rpx;
-      color: #666;
-      background: #f9f9f9;
-      padding: 10rpx 20rpx;
-      border-radius: 8rpx;
-      display: inline-flex;
+      padding: 0 20rpx;
+      height: 48rpx;
+      border-radius: 24rpx;
 
-      u-icon {
-        margin-right: 12rpx;
+      &.type-rx {
+        background: #FEF0F0;
+        border: 2rpx solid #FAB6B6;
+        .tag-text { color: #F56C6C; font-size: 24rpx; font-weight: bold; }
       }
+      &.type-otc {
+        background: #F0F9EB;
+        border: 2rpx solid #B3E19D;
+        .tag-text { color: #67C23A; font-size: 24rpx; font-weight: bold; }
+      }
+      &.type-health {
+        background: #FDF6EC;
+        border: 2rpx solid #FAECD8;
+        .tag-text { color: #E6A23C; font-size: 24rpx; font-weight: bold; }
+      }
+    }
+  }
+
+  .title { font-size: 36rpx; font-weight: 800; color: #303133; line-height: 1.4; margin-bottom: 12rpx; }
+  .sub-title { font-size: 26rpx; color: #909399; margin-bottom: 24rpx; }
+
+  .spec-bar {
+    background: #F7F8FA;
+    padding: 24rpx;
+    border-radius: 12rpx;
+
+    .spec-item {
+      display: flex;
+      font-size: 26rpx;
+      margin-bottom: 12rpx;
+      &:last-child { margin-bottom: 0; }
+
+      .label { color: #909399; width: 140rpx; }
+      .val { color: #303133; font-weight: 500; }
     }
   }
 }
 
-// 物流提示
-.order-text-tip {
-  background: #e6f3ff;
-  padding: 20rpx 30rpx;
-  margin: 0 20rpx 20rpx 20rpx;
-  border-radius: 12rpx;
+/* 3. 物流提示 */
+.logistics-tip {
+  background: #ECF5FF;
+  padding: 24rpx 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
   font-size: 26rpx;
-  color: #4175EE; // 统一为医疗蓝
-  line-height: 1.5;
-  border-left: 8rpx solid #4175EE;
+  color: #2B85E4;
 }
 
-// 详情区域
-.detail-section {
+/* 4. 信息卡片 & 优化标题 */
+.info-card {
   background: #fff;
   padding: 30rpx;
   margin-bottom: 20rpx;
 
-  .section-title {
+  // 优化：现代风格标题
+  .section-title-modern {
+    display: flex;
+    align-items: center;
     font-size: 32rpx;
-    font-weight: bold;
+    font-weight: 800;
     color: #333;
     margin-bottom: 24rpx;
-    position: relative;
-    padding-left: 24rpx;
 
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
+    .indicator {
       width: 8rpx;
       height: 32rpx;
-      background: #4175EE; // 统一颜色
+      background: linear-gradient(180deg, #2B85E4 0%, #5CADFF 100%);
       border-radius: 4rpx;
+      margin-right: 16rpx;
     }
   }
 
-  .section-content {
+  .card-body {
     font-size: 28rpx;
-    color: #555;
+    color: #606266;
     line-height: 1.8;
     text-align: justify;
   }
 
   .instruction-content {
-    .instruction-image {
-      width: 100%;
-      border-radius: 12rpx;
-      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
-    }
+    .instruction-image { width: 100%; border-radius: 8rpx; }
     .no-instruction {
+      padding: 40rpx 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text { font-size: 26rpx; color: #999; margin-top: 10rpx; }
+    }
+  }
+}
+
+/* 5. 详情图区域 */
+.detail-images-wrapper {
+  background: #fff;
+  padding-bottom: 20rpx;
+
+  .section-divider-modern {
+    text-align: center;
+    padding: 40rpx 0;
+
+    .text {
+      font-size: 28rpx;
+      color: #909399;
+      position: relative;
+      &::before, &::after {
+        content: '';
+        display: inline-block;
+        width: 60rpx;
+        height: 1px;
+        background: #E4E7ED;
+        vertical-align: middle;
+        margin: 0 20rpx;
+      }
+    }
+  }
+
+  .image-list {
+    width: 100%;
+    font-size: 0; // 消除间隙
+    .seamless-img { width: 100%; display: block; }
+  }
+}
+
+/* 6. 底部操作栏 */
+.footer-placeholder { height: 120rpx; }
+
+.footer-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  height: 110rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
+  display: flex;
+  align-items: center;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom);
+  height: calc(110rpx + env(safe-area-inset-bottom));
+
+  .icons-area {
+    display: flex;
+    margin-right: 30rpx;
+
+    .icon-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 60rpx 0;
-      u-icon { margin-bottom: 20rpx; }
-      text { font-size: 28rpx; color: #999; }
+      margin-right: 30rpx;
+      position: relative;
+      min-width: 80rpx;
+
+      text { font-size: 20rpx; color: #606266; margin-top: 4rpx; }
+
+      .icon-rel {
+        position: relative;
+        .badge-custom {
+          position: absolute;
+          top: -6rpx;
+          right: -10rpx;
+          background: #FA3534;
+          color: #fff;
+          font-size: 20rpx;
+          padding: 2rpx 8rpx;
+          border-radius: 20rpx;
+          border: 2rpx solid #fff;
+          line-height: 1;
+        }
+      }
     }
   }
-  
-  // 商品介绍图特殊样式 - 淘宝风格无缝布局
-  &.introduction-section {
-    padding: 30rpx 0; // 只保留上下padding，移除左右padding
-    
-    .section-title {
-      padding-left: 30rpx; // 标题保留左边距
-      padding-right: 30rpx;
-    }
-    
-    .introduction-images {
+
+  .btns-area {
+    flex: 1;
+    display: flex;
+    gap: 20rpx;
+
+    .btn {
+      flex: 1;
+      height: 80rpx;
+      border-radius: 40rpx;
+      font-size: 28rpx;
+      font-weight: bold;
+      border: none;
       display: flex;
-      flex-direction: column;
-      // 移除 gap，实现无缝衔接
-      
-      .introduction-image {
-        width: 100%;
-        display: block; // 避免行内元素间隙
-        // 移除 border-radius 和 box-shadow，实现淘宝风格
+      align-items: center;
+      justify-content: center;
+
+      &.btn-cart {
+        background: #EBF4FF;
+        color: #2B85E4;
+      }
+
+      &.btn-buy {
+        background: linear-gradient(90deg, #5CADFF 0%, #2B85E4 100%);
+        color: #fff;
+        box-shadow: 0 6rpx 12rpx rgba(43, 133, 228, 0.3);
       }
     }
   }
 }
 
-// 通用表单项间距
-.form-item-wrapper {
-  margin-bottom: 30rpx;
-}
+/* 7. 弹窗样式补充 */
+.popup-wrapper {
+  padding: 30rpx;
+  background: #fff;
 
-// 弹窗通用样式
-.cart-popup, .prescription-popup {
-  padding: 40rpx;
-  padding-bottom: 20rpx; // 基础padding，不含安全距离
-
-  // 弹窗底部增加安全距离
   &.safe-area-bottom {
-    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
-    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
   }
 
-  .popup-header {
-    margin-bottom: 40rpx;
+  .popup-header-title {
     text-align: center;
-    .popup-title { font-size: 36rpx; font-weight: 600; color: #333; }
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 30rpx;
   }
 
-  .product-info {
+  .product-info-row {
     display: flex;
-    margin-bottom: 40rpx;
-    .product-image {
-      width: 140rpx;
-      height: 140rpx;
-      border-radius: 12rpx;
-      margin-right: 24rpx;
-      border: 1px solid #f0f0f0;
-    }
-    .product-details {
+    margin-bottom: 30rpx;
+    .p-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; background: #f8f8f8; margin-right: 20rpx; }
+    .p-info {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      .product-name { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; }
-      .product-spec { font-size: 24rpx; color: #999; margin-bottom: 12rpx; }
-      .product-price { font-size: 36rpx; font-weight: bold; color: #ff4d4f; }
+      .p-name { font-size: 30rpx; font-weight: bold; color: #333; }
+      .p-spec { font-size: 24rpx; color: #999; }
+      .p-price { font-size: 36rpx; color: #FF4D4F; font-weight: bold; }
     }
   }
 
-  .quantity-selector {
+  .quantity-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 30rpx 0;
+    padding: 20rpx 0;
     border-top: 1rpx solid #f5f5f5;
     border-bottom: 1rpx solid #f5f5f5;
-    .quantity-label { font-size: 30rpx; color: #333; font-weight: 500; }
+    margin-bottom: 40rpx;
+    .label { font-size: 28rpx; color: #333; }
   }
 
   .popup-actions {
     display: flex;
-    justify-content: space-between;
-    margin-top: 50rpx;
     gap: 30rpx;
 
-    .cancel-btn {
-      flex: 1;
-      background-color: #f5f7fa;
-      color: #666;
-      border-radius: 50rpx;
-      font-size: 30rpx;
-      font-weight: 500;
-      border: none;
-    }
-
-    .confirm-btn {
-      flex: 1;
-      // 统一使用医疗蓝渐变
-      background: linear-gradient(135deg, #4A90E2, #4175EE);
-      color: #ffffff;
-      border-radius: 50rpx;
-      font-size: 30rpx;
-      font-weight: 500;
-      border: none;
-      box-shadow: 0 6rpx 16rpx rgba(65, 117, 238, 0.3);
-    }
-  }
-}
-
-// 底部操作栏 - 固定 + 适配
-.footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  // 高度 = 内容高度(110rpx) + 安全距离
-  height: calc(110rpx + constant(safe-area-inset-bottom));
-  height: calc(110rpx + env(safe-area-inset-bottom));
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-  background: #fff;
-  display: flex;
-  align-items: center;
-  padding-left: 30rpx;
-  padding-right: 30rpx;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
-  z-index: 1000;
-  box-sizing: border-box; // 关键：包含padding在高度内
-
-  .footer-left {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-    margin-right: 30rpx;
-
-    .action-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-right: 40rpx;
-      position: relative;
-
-      .icon-wrap {
-        position: relative; // 为 Badge 绝对定位提供基准
-        width: 48rpx;
-        height: 48rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .action-text {
-        font-size: 20rpx;
-        color: #666;
-        margin-top: 6rpx;
-      }
-    }
-  }
-
-  .footer-right {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    gap: 20rpx;
-
     button {
       flex: 1;
       height: 80rpx;
-      line-height: 80rpx;
       border-radius: 40rpx;
-      font-size: 28rpx;
-      font-weight: 600;
+      font-size: 30rpx;
       border: none;
-      padding: 0;
-
-      &.add-cart-btn {
-        // 加入购物车：浅色风格，避免视觉争抢
-        background: #EBF3FF;
-        color: #4175EE;
-        border: 2rpx solid #EBF3FF;
-      }
-
-      &.buy-now-btn {
-        // 立即购买：强烈的品牌色
-        background: linear-gradient(135deg, #4A90E2, #4175EE);
-        color: white;
-        box-shadow: 0 6rpx 16rpx rgba(65, 117, 238, 0.3);
-      }
-
-      &:active {
-        transform: scale(0.98);
-        opacity: 0.9;
-      }
+      &.btn-cancel { background: #F5F7FA; color: #606266; }
+      &.btn-confirm { background: #2B85E4; color: #fff; }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file