From ab038ec029662aaa9dcd7c624be85d5e35dc6e96 Mon Sep 17 00:00:00 2001
From: cyh666666 <2398882793@qq.com>
Date: Thu, 29 Jan 2026 17:28:47 +0800
Subject: [PATCH] =?UTF-8?q?consumer=E6=A8=A1=E5=9D=97=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=BA=A685%=EF=BC=8C=E8=BF=9E=E6=8E=A5=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8supabase=EF=BC=8C=E6=96=B0=E5=BB=BA=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/supadb/aksupa.uts                  |   34 +-
 pages/mall/consumer/address-list.uvue         |  170 +-
 pages/mall/consumer/category - 副本.uvue      | 1408 +++++++++++-
 pages/mall/consumer/category.uvue             |  418 +---
 .../category完成分类及商品数据获取.uvue       | 1131 ++++++++++
 ...- 副本 (4)完成分类、热销药品数据获取.uvue} |  921 ++++----
 pages/mall/consumer/index - 副本.uvue         | 1923 -----------------
 pages/mall/consumer/index.uvue                |  323 +--
 pages/mall/consumer/indexback.uvue            | 1540 -------------
 .../mall/consumer/product-detail - 副本.uvue  |  979 +++++++++
 pages/mall/consumer/product-detail.uvue       |  139 +-
 pages/mall/consumer/search.uvue               |  130 +-
 pages/mall/consumer/wallet.uvue               |   13 +
 pages/user/login.uvue                         |   38 +-
 utils/supabaseService.uts                     |  101 +-
 15 files changed, 4475 insertions(+), 4793 deletions(-)
 create mode 100644 pages/mall/consumer/category完成分类及商品数据获取.uvue
 rename pages/mall/consumer/{indexgood.uvue => index - 副本 (4)完成分类、热销药品数据获取.uvue} (70%)
 delete mode 100644 pages/mall/consumer/index - 副本.uvue
 delete mode 100644 pages/mall/consumer/indexback.uvue
 create mode 100644 pages/mall/consumer/product-detail - 副本.uvue

diff --git a/components/supadb/aksupa.uts b/components/supadb/aksupa.uts
index c47057f4..8980aaba 100644
--- a/components/supadb/aksupa.uts
+++ b/components/supadb/aksupa.uts
@@ -82,7 +82,26 @@ export class AkSupaQueryBuilder {
 	is(field : string, value : any) : AkSupaQueryBuilder { return this._addCond(field, 'is', value); }
 	contains(field : string, value : any) : AkSupaQueryBuilder { return this._addCond(field, 'cs', value); }
 	containedBy(field : string, value : any) : AkSupaQueryBuilder { return this._addCond(field, 'cd', value); }
-	not(field : string, value : any) : AkSupaQueryBuilder { return this._addCond(field, 'not', value); }
+	not(field : string, opOrValue : any, value?: any) : AkSupaQueryBuilder {
+		if (value !== undefined) {
+			// 三元形式：field, operator, value
+			// 例如 not('badge', 'is', null) -> badge=not.is.null
+			const combinedOp = 'not.' + opOrValue;
+			// 将 null 转换为字符串 'null'，避免构造对象时缺少 value 属性
+			let safeValue = value;
+			if (value === null) {
+				safeValue = 'null';
+			}
+			return this._addCond(field, combinedOp, safeValue);
+		} else {
+			// 二元形式：field, value
+			let safeValue = opOrValue;
+			if (opOrValue === null) {
+				safeValue = 'null';
+			}
+			return this._addCond(field, 'not', safeValue);
+		}
+	}
 
 	and() : AkSupaQueryBuilder { this._nextLogic = 'and'; return this; }
 	or(str ?: string) : AkSupaQueryBuilder {
@@ -97,7 +116,12 @@ export class AkSupaQueryBuilder {
 	private _addCond(afield : string, op : string, value : any) : AkSupaQueryBuilder {
 		//console.log('add cond:', op, afield, value)
 		const field = encodeURIComponent(afield)!!
-		this._conditions.push({ field, op, value, logic: this._nextLogic });
+		// 将 null 转换为字符串 'null'，避免构造对象时缺少 value 属性
+		let safeValue = value;
+		if (value === null) {
+			safeValue = 'null';
+		}
+		this._conditions.push({ field, op, value: safeValue, logic: this._nextLogic });
 		//console.log(this._conditions)
 		this._nextLogic = 'and';
 		return this;
@@ -213,8 +237,8 @@ export class AkSupaQueryBuilder {
 			const val = cond.value;
 			if ((op == 'in' || op == 'not.in') && Array.isArray(val)) {
 				params.push(`${k}=${op}.(${val.map(x => typeof x == 'object' ? encodeURIComponent(JSON.stringify(x)) : encodeURIComponent(x.toString())).join(',')})`);
-			} else if (op == 'is' && (val == null || val == 'null')) {
-				params.push(`${k}=is.null`);
+			} else if ((op == 'is' || op == 'not.is') && (val == null || val == 'null')) {
+				params.push(`${k}=${op}.null`);
 			} else {
 				const opvalstr: string = (typeof val == 'object') ? JSON.stringify(val) : (val as string);
 				params.push(`${k}=${op}.${encodeURIComponent(opvalstr)}`);
@@ -1051,4 +1075,4 @@ export function createClient(url : string, key : string) : AkSupa {
 	return new AkSupa(url, key);
 }
 
-export default AkSupa;
\ No newline at end of file
+export default AkSupa;
diff --git a/pages/mall/consumer/address-list.uvue b/pages/mall/consumer/address-list.uvue
index 67c6133d..1b6aeefa 100644
--- a/pages/mall/consumer/address-list.uvue
+++ b/pages/mall/consumer/address-list.uvue
@@ -156,6 +156,42 @@ const selectAddress = (item: Address) => {
 </script>
 
 <style>
+.item-actions {
+  padding: 10px;
+  border-left: 1px solid #f0f0f0;
+  display: flex;
+  flex-direction: column; /* 竖向排列图标 */
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+}
+
+.footer-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  padding: 10px 15px;
+  padding-bottom: calc(10px + env(safe-area-inset-bottom));
+  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+  display: flex;
+  justify-content: center; /* 居中显示 */
+  align-items: center;
+}
+
+.add-btn {
+  background-color: #ff5000;
+  color: white;
+  border-radius: 25px;
+  font-size: 16px;
+  height: 44px;
+  line-height: 44px;
+  border: none;
+  width: 100%; /* 默认占满 */
+  max-width: 100%;
+}
+
 /* 响应式布局优化 */
 @media screen and (min-width: 768px) {
   .address-list {
@@ -173,135 +209,11 @@ const selectAddress = (item: Address) => {
     left: 50%;
     transform: translateX(-50%);
     box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+    border-radius: 12px 12px 0 0; /* 桌面端加点圆角更美观 */
+  }
+  
+  .add-btn {
+    width: 300px; /* 桌面端限制宽度 */
   }
 }
-
-.address-list-page {
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding-bottom: 80px;
-}
-
-.address-list {
-  padding: 15px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 100px;
-}
-
-.empty-icon {
-  font-size: 60px;
-  margin-bottom: 20px;
-}
-
-.empty-text {
-  color: #999;
-  font-size: 16px;
-}
-
-.address-item {
-  background-color: white;
-  border-radius: 10px;
-  padding: 15px;
-  margin-bottom: 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.item-content {
-  flex: 1;
-  margin-right: 15px;
-}
-
-.item-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-}
-
-.user-name {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-  margin-right: 10px;
-}
-
-.user-phone {
-  font-size: 14px;
-  color: #666;
-  margin-right: 10px;
-}
-
-.default-tag {
-  background-color: #ff5000;
-  color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-right: 5px;
-}
-
-.label-tag {
-  background-color: #e0f2f1;
-  color: #00796b;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.address-text {
-  font-size: 14px;
-  color: #333;
-  line-height: 1.4;
-}
-
-.item-actions {
-  padding: 10px;
-  border-left: 1px solid #f0f0f0;
-  display: flex;
-  flex-direction: column; /* 竖向排列图标 */
-  justify-content: center;
-  align-items: center;
-  gap: 15px;
-}
-
-.action-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-}
-
-.action-icon {
-  font-size: 20px;
-  color: #999;
-}
-
-.footer-btn {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: white;
-  padding: 10px 15px;
-  padding-bottom: calc(10px + env(safe-area-inset-bottom));
-  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
-}
-
-.add-btn {
-  background-color: #ff5000;
-  color: white;
-  border-radius: 25px;
-  font-size: 16px;
-  height: 44px;
-  line-height: 44px;
-  border: none;
-}
 </style>
diff --git a/pages/mall/consumer/category - 副本.uvue b/pages/mall/consumer/category - 副本.uvue
index d217ab27..5c02cd56 100644
--- a/pages/mall/consumer/category - 副本.uvue	
+++ b/pages/mall/consumer/category - 副本.uvue	
@@ -1,131 +1,1419 @@
-<!-- 只替换 <style> 部分，其他保持不变 -->
-<style>
-/* ...（前面的样式如 .category-page, .search-bar 等保持不变）... */
+<template>
+    <view class="category-page">
+        <!-- 顶部搜索栏 -->
+        <view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+            <view class="search-container">
+                <view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
+                    <!-- 模拟输入框 -->
+                    <text class="search-placeholder">请输入药品名称、症状或品牌</text>
+                    
+                    <!-- 扫码图标 -->
+                    <view class="nav-icon-btn" @click.stop="onScan">
+                        <text class="nav-icon">🔳</text>
+                    </view>
 
-/* 分类内容区 —— 关键修复 */
+                    <!-- 相机图标 -->
+                    <view class="nav-camera-btn" @click.stop="onCamera">
+                        <text class="nav-camera-icon">📷</text>
+                    </view>
+                    
+                    <!-- 搜索按钮 -->
+                    <view class="nav-inner-search-btn" :style="{ height: '22px' }">
+                        <text class="nav-inner-search-text">搜索</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 分类内容区 -->
+        <view 
+            class="category-content"
+            :style="{ 
+                marginTop: (statusBarHeight + headerHeight + 10) + 'px',
+                height: `calc(100vh - ${statusBarHeight + headerHeight + 10}px)`
+            }"
+        >
+            <!-- 左侧一级分类 -->
+            <scroll-view scroll-y class="primary-category">
+                <view 
+                    v-for="item in primaryCategories" 
+                    :key="item.id"
+                    :class="['primary-item', { active: activePrimary === item.id }]"
+                    @click="selectPrimaryCategory(item.id)"
+                    :style="{ backgroundColor: activePrimary === item.id ? item.color : 'transparent' }"
+                >
+                    <text class="primary-icon">{{ item.icon }}</text>
+                    <text class="primary-name">{{ item.name }}</text>
+                </view>
+            </scroll-view>
+            
+            <!-- 右侧商品列表 -->
+            <scroll-view scroll-y class="product-content">
+                <!-- 分类标题 -->
+                <view class="category-header">
+                    <text class="category-title">{{ currentCategoryName }}</text>
+                    <text class="category-desc">{{ currentCategoryDesc }}</text>
+                </view>
+                
+                <!-- 商品网格 -->
+                <view v-if="productList.length > 0" class="product-grid">
+                    <view 
+                        v-for="product in productList" 
+                        :key="product.id"
+                        class="product-card"
+                        @click="navigateToProduct(product)"
+                    >
+                        <view class="product-badge" v-if="product.badge">{{ product.badge }}</view>
+                        <image 
+                            class="product-image" 
+                            :src="product.image" 
+                            mode="aspectFill"
+                        />
+                        <view class="product-info">
+                            <text class="product-name">{{ product.name }}</text>
+                            <text class="product-spec">{{ product.specification }}</text>
+                            
+                            <view class="price-section">
+                                <view class="current-price">
+                                    <text class="price-symbol">¥</text>
+                                    <text class="price-value">{{ product.price }}</text>
+                                </view>
+                                <text class="original-price" v-if="product.originalPrice > product.price">
+                                    ¥{{ product.originalPrice }}
+                                </text>
+                            </view>
+                            
+                            <view class="product-meta">
+                                <text class="manufacturer">{{ product.manufacturer }}</text>
+                                <view class="sales-info">
+                                    <text class="sales-count">已售{{ product.sales }}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                
+                <!-- 空状态 -->
+                <view v-else class="empty-state">
+                    <text class="empty-icon">💊</text>
+                    <text class="empty-text">暂无相关药品</text>
+                    <text class="empty-desc">该分类下暂无商品，敬请期待</text>
+                </view>
+                
+                <!-- 加载更多提示 -->
+                <view v-if="hasMore" class="load-more">
+                    <text class="load-text">上拉加载更多</text>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+
+// 响应式数据
+const statusBarHeight = ref(0)
+const headerHeight = ref(44) // 默认头部高度
+const primaryCategories = ref<any[]>([])
+const productList = ref<any[]>([])
+const activePrimary = ref<string>('cold')
+const cartCount = ref(3)
+const hasMore = ref(true)
+
+// 获取当前分类信息
+const currentCategoryName = ref('感冒发烧')
+const currentCategoryDesc = ref('解热镇痛')
+
+// 页面参数
+const pageParams = ref<any>({})
+
+// 医药分类数据（与主页一致）
+const medicineCategories = [
+    { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
+    { id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
+    { id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
+    { id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
+    { id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
+    { id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
+    { id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
+    { id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
+    { id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
+    { id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
+]
+
+// Mock 商品数据 - 使用本地图片避免网络请求
+const mockProducts = {
+    cold: [
+        {
+            id: 'cold1',
+            shopId: 'shop_001',
+            shopName: '修正药业官方旗舰店',
+            name: '布洛芬缓释胶囊',
+            specification: '0.3g*24粒',
+            price: 18.5,
+            originalPrice: 25.8,
+            image: '/static/images/default-product.png',
+            manufacturer: '修正药业',
+            sales: 2560,
+            badge: '热销'
+        },
+        {
+            id: 'cold2',
+            shopId: 'shop_002',
+            shopName: '白云山大药房',
+            name: '板蓝根颗粒',
+            specification: '10g*20袋',
+            price: 22.8,
+            originalPrice: 29.9,
+            image: '/static/images/default-product.png',
+            manufacturer: '白云山',
+            sales: 1890,
+            badge: '推荐'
+        },
+        {
+            id: 'cold3',
+            shopId: 'shop_003',
+            shopName: '以岭药业自营店',
+            name: '连花清瘟胶囊',
+            specification: '0.35g*36粒',
+            price: 42.8,
+            originalPrice: 48.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '以岭药业',
+            sales: 3200,
+            badge: '爆款'
+        },
+        {
+            id: 'cold4',
+            shopId: 'shop_004',
+            shopName: '强生制药旗舰店',
+            name: '对乙酰氨基酚片',
+            specification: '0.5g*12片',
+            price: 8.9,
+            originalPrice: 12.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '强生制药',
+            sales: 1420,
+            badge: '特价'
+        },
+        {
+            id: 'cold5',
+            shopId: 'shop_005',
+            shopName: '同仁堂大药房',
+            name: '感冒清热颗粒',
+            specification: '3g*10袋',
+            price: 16.5,
+            originalPrice: 19.9,
+            image: '/static/images/default-product.png',
+            manufacturer: '同仁堂',
+            sales: 980,
+            badge: '新品'
+        },
+        {
+            id: 'cold6',
+            shopId: 'shop_006',
+            shopName: '三九医药旗舰店',
+            name: '复方氨酚烷胺片',
+            specification: '10片/盒',
+            price: 12.8,
+            originalPrice: 15.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '三九医药',
+            sales: 1650,
+            badge: '家庭装'
+        }
+    ],
+    
+    stomach: [
+        {
+            id: 'stomach1',
+            shopId: 'shop_006',
+            shopName: '三九医药旗舰店',
+            name: '胃康灵胶囊',
+            specification: '0.4g*24粒',
+            price: 32.8,
+            originalPrice: 38.5,
+            image: '/static/images/default-product.png',
+            manufacturer: '三九医药',
+            sales: 890,
+            badge: '热销'
+        },
+        {
+            id: 'stomach2',
+            shopId: 'shop_007',
+            shopName: '阿斯利康医药',
+            name: '奥美拉唑肠溶胶囊',
+            specification: '20mg*14粒',
+            price: 28.5,
+            originalPrice: 35.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '阿斯利康',
+            sales: 1250,
+            badge: '处方药'
+        },
+        {
+            id: 'stomach3',
+            shopId: 'shop_008',
+            shopName: '江中制药旗舰店',
+            name: '健胃消食片',
+            specification: '0.8g*32片',
+            price: 15.9,
+            originalPrice: 19.9,
+            image: '/static/images/default-product.png',
+            manufacturer: '江中制药',
+            sales: 2100,
+            badge: '推荐'
+        },
+        {
+            id: 'stomach4',
+            shopId: 'shop_009',
+            shopName: '益普生大药房',
+            name: '蒙脱石散',
+            specification: '3g*10袋',
+            price: 18.6,
+            originalPrice: 22.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '益普生',
+            sales: 1780,
+            badge: '止泻'
+        },
+        {
+            id: 'stomach5',
+            shopId: 'shop_010',
+            shopName: '西安杨森旗舰店',
+            name: '多潘立酮片',
+            specification: '10mg*30片',
+            price: 22.8,
+            originalPrice: 26.5,
+            image: '/static/images/default-product.png',
+            manufacturer: '西安杨森',
+            sales: 950,
+            badge: '促消化'
+        },
+        {
+            id: 'stomach6',
+            shopId: 'shop_011',
+            shopName: '拜耳医药自营店',
+            name: '铝碳酸镁咀嚼片',
+            specification: '0.5g*20片',
+            price: 25.9,
+            originalPrice: 29.9,
+            image: '/static/images/default-product.png',
+            manufacturer: '拜耳',
+            sales: 1320,
+            badge: '护胃'
+        }
+    ],
+    
+    pain: [
+        {
+            id: 'pain1',
+            shopId: 'shop_012',
+            shopName: '华北制药旗舰店',
+            name: '阿莫西林胶囊',
+            specification: '0.25g*24粒',
+            price: 28.5,
+            originalPrice: 35.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '华北制药',
+            sales: 1560,
+            badge: '处方药'
+        },
+        {
+            id: 'pain2',
+            shopId: 'shop_013',
+            shopName: '诺华制药旗舰店',
+            name: '双氯芬酸钠缓释片',
+            specification: '75mg*10片',
+            price: 19.8,
+            originalPrice: 24.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '诺华制药',
+            sales: 1280,
+            badge: '止痛'
+        },
+        {
+            id: 'pain3',
+            shopId: 'shop_014',
+            shopName: '云南白药旗舰店',
+            name: '云南白药胶囊',
+            specification: '0.25g*32粒',
+            price: 35.9,
+            originalPrice: 42.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '云南白药',
+            sales: 2350,
+            badge: '经典'
+        },
+        {
+            id: 'pain4',
+            shopId: 'shop_015',
+            shopName: '辉瑞医药旗舰店',
+            name: '塞来昔布胶囊',
+            specification: '0.2g*10粒',
+            price: 48.6,
+            originalPrice: 55.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '辉瑞',
+            sales: 890,
+            badge: '抗炎'
+        },
+        {
+            id: 'pain5',
+            shopId: 'shop_016',
+            shopName: '中美史克大药房',
+            name: '布洛芬片',
+            specification: '0.1g*24片',
+            price: 12.5,
+            originalPrice: 15.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '中美史克',
+            sales: 1680,
+            badge: '经济装'
+        },
+        {
+            id: 'pain6',
+            shopId: 'shop_002',
+            shopName: '白云山大药房',
+            name: '头孢克肟胶囊',
+            specification: '0.1g*6粒',
+            price: 32.8,
+            originalPrice: 38.0,
+            image: '/static/images/default-product.png',
+            manufacturer: '广州白云山',
+            sales: 1120,
+            badge: '抗生素'
+        }
+    ]
+}
+
+// 补充其他分类的默认数据（简化版）
+const generateDefaultProducts = (categoryId: string) => {
+    const baseProducts = [
+        { name: '通用药品1', price: 25.8, manufacturer: '知名药企', sales: 1200 },
+        { name: '通用药品2', price: 18.5, manufacturer: '知名药企', sales: 950 },
+        { name: '通用药品3', price: 32.0, manufacturer: '知名药企', sales: 1450 },
+        { name: '通用药品4', price: 22.8, manufacturer: '知名药企', sales: 880 },
+        { name: '通用药品5', price: 28.9, manufacturer: '知名药企', sales: 1100 },
+        { name: '通用药品6', price: 19.9, manufacturer: '知名药企', sales: 920 }
+    ]
+    
+    return baseProducts.map((product, index) => ({
+        id: `${categoryId}${index + 1}`,
+        shopId: `shop_default_${categoryId}_${index}`, // 确保不同分类店铺ID不同
+        shopName: '平台自营大药房',
+        ...product,
+        specification: '规格待定',
+        originalPrice: product.price * 1.2,
+        image: '/static/images/default-product.png',
+        badge: index === 0 ? '热销' : index === 1 ? '推荐' : ''
+    }))
+}
+
+// 生命周期
+onMounted(() => {
+    initPage()
+    
+    console.log('=== category页面onMounted被调用 ===')
+    
+    // 在onMounted中只初始化页面，不处理分类参数
+    // 分类参数的处理交给onLoad函数，因为onLoad在页面加载时执行
+    console.log('onMounted中不处理分类参数，等待onLoad处理')
+    
+    // 注意：这里不再默认选择分类，让onLoad函数处理分类选择
+    // 如果onLoad没有设置分类，则保持默认状态
+})
+
+// 页面加载时处理参数 - 这是处理分类切换的主要入口
+onLoad((options: any) => {
+	console.log('=== category页面onLoad被调用 ===')
+	console.log('页面加载时间:', Date.now())
+	console.log('传入的options参数:', options)
+	console.log('当前活动分类:', activePrimary.value)
+	
+	let categoryId = ''
+	let categoryName = ''
+	
+	// 首先检查传入的options参数
+	if (options && options.categoryId) {
+		categoryId = options.categoryId
+		categoryName = options.name || ''
+		console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
+	}
+	
+	// 如果options中没有，尝试从getCurrentPages()获取
+	if (!categoryId) {
+		const pages = getCurrentPages()
+		if (pages.length > 0) {
+			const currentPage = pages[pages.length - 1]
+			const pageOptions = currentPage.options || {}
+			console.log('从getCurrentPages()获取参数:', pageOptions)
+			
+			if (pageOptions.categoryId) {
+				categoryId = pageOptions.categoryId
+				categoryName = pageOptions.name || ''
+				console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
+			}
+		}
+	}
+	
+	// 如果有找到分类ID，则选中对应的分类
+	if (categoryId) {
+		console.log('✅ 准备选中分类:', categoryId)
+		console.log('分类名称:', categoryName || '未指定')
+		
+		// 检查是否需要更新分类
+		if (activePrimary.value !== categoryId) {
+			console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
+			console.log('准备调用selectPrimaryCategory函数...')
+			selectPrimaryCategory(categoryId)
+		} else {
+			console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
+			console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
+			// 即使分类相同，也重新加载数据，确保数据是最新的
+			// 添加一个小的延迟，确保页面完全显示后再更新数据
+			setTimeout(() => {
+				selectPrimaryCategory(categoryId)
+			}, 100)
+		}
+	} else {
+		console.log('⚠️ onLoad中未找到分类参数，使用默认分类')
+		// 默认选中第一个分类
+		const defaultCategory = 'cold'
+		console.log('默认分类:', defaultCategory)
+		
+		// 无论如何都重新加载一次默认分类的数据
+		setTimeout(() => {
+			selectPrimaryCategory(defaultCategory)
+		}, 100)
+	}
+	
+	console.log('=== category页面onLoad执行完成 ===')
+})
+
+// 页面显示时也检查参数，确保从其他页面返回时能正确显示
+onShow(() => {
+	console.log('=== category页面onShow被调用 ===')
+	console.log('页面显示时间:', Date.now())
+	console.log('当前活动分类:', activePrimary.value)
+	
+	// 在onShow中，我们也需要检查是否有新的参数
+	// 因为当从主页再次点击分类跳转过来时，可能不会触发onLoad
+	// 而是触发onShow
+	
+	// 获取当前页面实例和参数
+	const pages = getCurrentPages()
+	if (pages.length > 0) {
+		const currentPage = pages[pages.length - 1]
+		const pageOptions = currentPage.options || {}
+		console.log('onShow中获取参数:', pageOptions)
+		
+		// 检查是否有分类参数
+		if (pageOptions.categoryId) {
+			const categoryId = pageOptions.categoryId
+			const categoryName = pageOptions.name || ''
+			
+			console.log('✅ onShow中找到分类参数:', categoryId, categoryName)
+			console.log('URL中的时间戳参数:', pageOptions.timestamp)
+			console.log('URL中的随机参数:', pageOptions.random)
+			
+			// 检查是否需要更新分类
+			if (activePrimary.value !== categoryId) {
+				console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
+				console.log('准备调用selectPrimaryCategory函数...')
+				selectPrimaryCategory(categoryId)
+			} else {
+				console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
+				console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
+				// 即使分类相同，也重新加载数据，确保数据是最新的
+				// 添加一个小的延迟，确保页面完全显示后再更新数据
+				setTimeout(() => {
+					selectPrimaryCategory(categoryId)
+				}, 100)
+			}
+		} else {
+			console.log('⚠️ onShow中未找到分类参数')
+			console.log('尝试从URL中解析参数...')
+			
+			// 尝试从当前页面的URL中解析参数
+			const currentUrl = currentPage.route || ''
+			console.log('当前页面路由:', currentUrl)
+			
+			// 如果URL中有查询参数，尝试解析
+			if (currentPage.$page && currentPage.$page.fullPath) {
+				const fullPath = currentPage.$page.fullPath
+				console.log('完整路径:', fullPath)
+				
+				// 尝试解析查询参数
+				const queryIndex = fullPath.indexOf('?')
+				if (queryIndex > -1) {
+					const queryString = fullPath.substring(queryIndex + 1)
+					console.log('查询字符串:', queryString)
+					
+					// 简单解析查询参数
+					const params = new URLSearchParams(queryString)
+					const urlCategoryId = params.get('categoryId')
+					if (urlCategoryId) {
+						console.log('✅ 从URL解析到分类参数:', urlCategoryId)
+						selectPrimaryCategory(urlCategoryId)
+					}
+				}
+			}
+		}
+	}
+	
+	console.log('=== category页面onShow执行完成 ===')
+})
+
+// 初始化页面
+const initPage = () => {
+    const systemInfo = uni.getSystemInfoSync()
+    statusBarHeight.value = systemInfo.statusBarHeight || 0
+    
+    // 保持与主页一致的固定高度计算，不进行动态调整
+    // 这样在移动端会与主页的视觉体验保持一致（主页占位符固定为44px）
+    headerHeight.value = 10
+    
+    // 获取页面参数
+    const pages = getCurrentPages()
+    if (pages.length > 0) {
+        const currentPage = pages[pages.length - 1]
+        pageParams.value = currentPage.options || {}
+    }
+    
+    // 加载分类数据
+    primaryCategories.value = medicineCategories
+}
+
+// 选择一级分类
+const selectPrimaryCategory = (categoryId: string) => {
+    console.log('=== selectPrimaryCategory函数开始执行 ===')
+    console.log('传入的categoryId:', categoryId)
+    console.log('当前时间:', Date.now())
+    
+    // 验证categoryId是否有效
+    if (!categoryId) {
+        console.error('categoryId为空，使用默认分类')
+        categoryId = 'cold'
+    }
+    
+    console.log('验证后的categoryId:', categoryId)
+    console.log('当前activePrimary的值:', activePrimary.value)
+    
+    // 更新活动分类
+    activePrimary.value = categoryId
+    console.log('更新后的activePrimary:', activePrimary.value)
+    
+    // 更新当前分类信息
+    const category = medicineCategories.find(cat => cat.id === categoryId)
+    if (category) {
+        currentCategoryName.value = category.name
+        currentCategoryDesc.value = category.desc
+        console.log('✅ 找到分类:', category.name, '描述:', category.desc)
+    } else {
+        console.error('❌ 未找到分类ID:', categoryId, '，使用默认分类')
+        // 如果找不到对应的分类，使用第一个分类
+        if (medicineCategories.length > 0) {
+            const firstCategory = medicineCategories[0]
+            currentCategoryName.value = firstCategory.name
+            currentCategoryDesc.value = firstCategory.desc
+            activePrimary.value = firstCategory.id
+            categoryId = firstCategory.id
+            console.log('使用默认分类:', firstCategory.name)
+        }
+    }
+    
+    console.log('准备加载商品数据...')
+    
+    // 加载对应商品
+    if (mockProducts[categoryId]) {
+        productList.value = mockProducts[categoryId]
+        console.log('✅ 加载mock商品数据成功')
+        console.log('分类:', categoryId)
+        console.log('商品数量:', mockProducts[categoryId].length)
+        console.log('商品列表:', mockProducts[categoryId])
+    } else {
+        productList.value = generateDefaultProducts(categoryId)
+        console.log('✅ 加载默认商品数据成功')
+        console.log('分类:', categoryId)
+        console.log('商品数量:', productList.value.length)
+        console.log('商品列表:', productList.value)
+    }
+    
+    hasMore.value = true
+    
+    // 验证数据是否已正确更新
+    console.log('数据更新验证:')
+    console.log('activePrimary:', activePrimary.value)
+    console.log('currentCategoryName:', currentCategoryName.value)
+    console.log('currentCategoryDesc:', currentCategoryDesc.value)
+    console.log('productList长度:', productList.value.length)
+    
+    console.log('=== selectPrimaryCategory函数执行完成 ===')
+}
+
+// 添加到购物车
+const addToCart = (product: any) => {
+    // 获取现有购物车数据
+    const cartData = uni.getStorageSync('cart')
+    let cartItems: any[] = []
+    
+    if (cartData) {
+        try {
+            cartItems = JSON.parse(cartData as string) as any[]
+        } catch (e) {
+            console.error('解析购物车数据失败', e)
+        }
+    }
+    
+    // 检查商品是否已存在
+    const existingItem = cartItems.find((item: any) => item.id === product.id)
+    
+    if (existingItem) {
+        existingItem.quantity++
+    } else {
+        // 添加新商品
+        cartItems.push({
+            id: product.id,
+            shopId: product.shopId || 'shop_default',
+            shopName: product.shopName || product.manufacturer || '自营店铺',
+            name: product.name,
+            price: product.price,
+            image: product.image,
+            spec: product.specification || '默认规格',
+            quantity: 1,
+            selected: true
+        })
+    }
+    
+    // 保存回存储
+    uni.setStorageSync('cart', JSON.stringify(cartItems))
+    
+    uni.showToast({
+        title: '已添加到购物车',
+        icon: 'success'
+    })
+    cartCount.value++
+}
+
+// 导航函数
+const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
+const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
+const navigateToProduct = (product: any) => {
+    uni.navigateTo({
+        url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}`
+    })
+}
+
+// 相机功能
+const onCamera = () => {
+    uni.chooseImage({
+        count: 1,
+        sourceType: ['camera'],
+        success: (res) => {
+            console.log('相机拍摄成功:', res.tempFilePaths[0])
+            uni.showToast({
+                title: '已拍摄，正在识别...',
+                icon: 'loading'
+            })
+            // 这里可以添加后续的识别逻辑
+            setTimeout(() => {
+                 uni.showToast({
+                    title: '识别成功',
+                    icon: 'success'
+                })
+            }, 1000)
+        },
+        fail: (err) => {
+            console.error('相机调用失败:', err)
+        }
+    })
+}
+
+// 扫码功能
+const onScan = () => {
+    uni.scanCode({
+        success: (res) => {
+            console.log('扫码成功:', res)
+            uni.showToast({
+                title: '扫码成功: ' + res.result,
+                icon: 'none'
+            })
+        },
+        fail: (err) => {
+            console.error('扫码失败:', err)
+        }
+    })
+}
+</script>
+
+<style>
+.category-page {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f8fafc;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+}
+/* 搜索栏 */
+.search-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+    z-index: 1000;
+    box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
+}
+
+/* 搜索栏 */
+/* 导航栏搜索框容器内边距调整 */
+.search-container {
+    height: 44px; /* 调整为与消息页一致的高度 */
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* 搜索框 hover 效果 */
+.search-box:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 导航栏搜索框容器内边距调整 */
+.search-box {
+    flex: 1;
+    max-width: 600px;
+    background: #f0f0f0;
+    border-radius: 20px;
+    padding: 0 4px 0 12px;
+    display: flex;
+    flex-direction: row; /* UVUE 显式设置 row */
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 100%;
+    height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
+}
+
+.search-placeholder {
+    font-size: 14px;
+    color: #999;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.nav-inner-search-text {
+    font-size: 12px; /* 字体稍微变小 */
+    color: #ffffff;
+    font-weight: 500;
+}
+
+.icon {
+    font-size: 22px;
+    color: white;
+}
+
+.nav-icon-btn {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #ddd;
+    margin-right: 8px;
+}
+
+.nav-icon {
+    font-size: 18px;
+}
+
+.nav-camera-btn {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-right-color: #ddd;
+    border-right: 1px solid #ddd; /* 修复UVUE样式 */
+    margin-right: 8px;
+}
+
+.nav-camera-icon {
+    font-size: 20px;
+}
+
+/* 搜索按钮高度微调 */
+.nav-inner-search-btn {
+    padding: 0 12px; /* 减小内边距 */
+    background-color: #87CEEB; /* 天空蓝 */
+    border-radius: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 24px; /* 随搜索框高度减小而减小 */
+}
+
+.cart-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: #FF5722;
+    color: white;
+    font-size: 10px;
+    min-width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border: 2px solid #4CAF50;
+}
+
+/* 分类内容区 */
 .category-content {
     display: flex;
-    margin-top: 60px;
+    flex-direction: row; /* 强制水平排列 */
+    /* margin-top: 44px; 已通过 style 动态绑定 */
     padding: 0 16px;
     max-width: 1400px;
-    margin: 60px auto 0 auto; /* 更安全的居中 */
+    margin-left: auto;
+    margin-right: auto;
     width: 100%;
     gap: 20px;
-    min-height: calc(100vh - 60px); /* 避免内容太短时布局塌陷 */
+    /* height: calc(100vh - 44px); 已通过 style 动态绑定 */
+    overflow: hidden; /* 防止整体滚动 */
 }
 
 /* 左侧一级分类 */
 .primary-category {
     width: 120px;
+    height: 100%; /* 占满父容器高度 */
     background: white;
     border-radius: 12px;
     padding: 12px 0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     flex-shrink: 0;
-    height: fit-content; /* 防止拉伸 */
-    max-height: calc(100vh - 80px); /* 避免溢出屏幕 */
-    overflow-y: auto;
+    overflow-y: auto; /* 允许内部滚动 */
 }
 
-/* 右侧商品区域 —— 必须 flex: 1 才能占满剩余空间 */
+.primary-item {
+    display: flex;
+    flex-direction: column; /* 图标和文字垂直排列 */
+    align-items: center;
+    justify-content: center;
+    padding: 12px 8px;
+    margin: 4px 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #666;
+    text-align: center;
+}
+
+.primary-item:hover {
+    transform: translateY(-2px); /* 悬停时向上浮动 */
+}
+
+.primary-item.active {
+    color: white !important;
+    font-weight: bold;
+}
+
+.primary-icon {
+    font-size: 24px;
+    margin-bottom: 6px;
+    margin-right: 0; /* 移除右边距 */
+    text-align: center;
+    display: block;
+}
+
+.primary-name {
+    font-size: 13px;
+    line-height: 1.4;
+    display: block;
+}
+
+/* 右侧内容区 */
 .product-content {
     flex: 1;
+    height: 100%; /* 占满父容器高度 */
+    padding: 0; /* 移除内边距，交给内部元素 */
+    overflow-y: auto; /* 允许内部滚动 */
+}
+
+.category-header {
+    margin-bottom: 16px;
+    padding: 16px 8px 0 8px;
+    position: sticky;
+    top: 0;
+    background-color: #f8fafc;
+    z-index: 10;
+}
+
+.category-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.category-desc {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 商品网格 */
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.product-card {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid #e0e0e0;
+    position: relative;
+}
+
+.product-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.product-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: #FF5722;
+    color: white;
+    font-size: 11px;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-weight: 600;
+    z-index: 2;
+}
+
+.product-image {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    background: white;
+}
+
+.product-info {
+    padding: 16px;
+}
+
+.product-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+    display: block;
+    line-height: 1.4;
+}
+
+.product-spec {
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 12px;
+    display: block;
+}
+
+.price-section {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.current-price {
+    display: flex;
+    align-items: baseline;
+}
+
+.price-symbol {
+    font-size: 14px;
+    color: #FF5722;
+}
+
+.price-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #FF5722;
+    margin-left: 2px;
+}
+
+.original-price {
+    font-size: 13px;
+    color: #999;
+    text-decoration: line-through;
+}
+
+.product-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 12px;
+}
+
+.manufacturer {
+    color: #666;
+}
+
+.sales-count {
+    color: #999;
+}
+
+.product-action {
+    margin-top: 12px;
+}
+
+.cart-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background: #4CAF50;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cart-btn:hover {
+    background: #388E3C;
+}
+
+.cart-icon {
+    font-size: 14px;
+}
+
+/* 空状态 */
+.empty-state {
     display: flex;
     flex-direction: column;
-    min-width: 0; /* 防止 flex 子项溢出 */
-    background: #f8fafc; /* 与背景一致，或可设为 white */
-    padding: 16px 0;
-    border-radius: 12px;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
 }
 
-/* 商品网格容器需要滚动时也能正常工作 */
-.product-content > * {
-    flex-shrink: 0; /* 防止 header/grid 被压缩 */
+.empty-icon {
+    font-size: 60px;
+    color: #4CAF50;
+    margin-bottom: 15px;
 }
 
-/* ===== 响应式：小屏手机 (小于等于 414px) ===== */
+.empty-text {
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.empty-desc {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 加载更多 */
+.load-more {
+    text-align: center;
+    padding: 20px 0;
+    color: #999;
+    font-size: 14px;
+}
+
+.load-text {
+    display: inline-block;
+    padding: 8px 16px;
+    background: #f5f5f5;
+    border-radius: 20px;
+}
+
+/* ===== 响应式设计 ===== */
+
+/* 小屏手机 (小于414px) */
 @media screen and (max-width: 414px) {
     .category-content {
-        flex-direction: column;
-        padding: 0 12px;
-        margin-top: 55px; /* 匹配搜索栏高度 */
+        /* flex-direction: column; 移除这一行，保持 row 布局 */
+        padding: 0 8px;
+        gap: 10px;
     }
-
+    
     .primary-category {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 8px;
-        height: auto;
-        max-height: none;
-        overflow: visible;
+        width: 80px; /* 减小宽度 */
+        /* display: flex; 移除flex布局，保持默认 */
+        /* flex-wrap: wrap; 移除换行 */
+        padding: 8px 0;
     }
-
+    
     .primary-item {
-        width: calc(25% - 8px);
+        /* width: calc(25% - 8px); 移除百分比宽度 */
+        width: auto; /* 恢复自动宽度 */
         margin: 4px;
-        padding: 10px 8px;
-        text-align: center;
+        padding: 8px 4px;
+        /* text-align: center; 已经在通用样式中设置 */
     }
-
+    
     .primary-icon {
         margin-right: 0;
         margin-bottom: 4px;
-        font-size: 16px;
+        font-size: 20px;
     }
-
+    
     .primary-name {
-        font-size: 12px;
+        font-size: 11px;
     }
-
+    
     .product-grid {
-        grid-template-columns: 1fr;
-        gap: 16px;
+        grid-template-columns: repeat(2, 1fr); /* 改为双列显示 */
+        gap: 8px;
+        padding: 0 4px 20px 4px; /* 增加底部内边距 */
     }
-
+    
+    /* 手机端商品卡片极简模式 - 仿照主页样式 */
+    .product-spec,
+    .manufacturer,
+    .original-price,
+    .sales-info,
+    .product-badge { /* 分类页也隐藏角标，保持整洁 */
+        display: none;
+    }
+    
+    .product-info {
+        padding: 6px;
+    }
+    
+    .product-image {
+        height: 100px; /* 由于分类页右侧空间更窄，图片高度设得更小一点 */
+    }
+    
+    .product-name {
+        font-size: 12px;
+        height: 32px;
+        line-height: 1.3;
+        margin-bottom: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    
+    .price-section {
+        margin-bottom: 0;
+        margin-top: 4px;
+        justify-content: space-between;
+        width: 100%;
+    }
+    
+    .price-symbol {
+        font-size: 10px;
+    }
+    
+    .price-value {
+        font-size: 14px;
+    }
+    
+    .product-meta {
+        display: none; /* 隐藏整个元数据行 */
+    }
+    
     .search-container {
         padding: 0 12px;
         height: 55px;
     }
-
+    
     .search-box {
         padding: 8px 16px;
     }
-
+    
     .category-header {
-        padding: 0;
+        padding: 12px 4px 0 4px;
     }
 }
 
-/* 中屏及以上保持网格列数变化，但布局仍是左右 */
-@media screen and (min-width: 415px) {
+/* 中屏手机/小平板 (415px-768px) */
+@media screen and (min-width: 415px) and (max-width: 768px) {
     .product-grid {
-        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+}
+
+/* 平板设备 (769px-1024px) */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+    .product-grid {
+        grid-template-columns: repeat(3, 1fr);
         gap: 20px;
     }
 }
 
-@media screen and (min-width: 415px) and (max-width: 768px) {
-    .product-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-    .product-grid {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
+/* 桌面端 (1025px以上) */
 @media screen and (min-width: 1025px) {
+    .category-content {
+        gap: 30px;
+        padding: 0 24px;
+    }
+    
+    .primary-category {
+        width: 160px;
+        padding: 16px 0;
+    }
+    
+    .primary-item {
+        padding: 16px 20px;
+        margin: 6px 12px;
+        border-radius: 10px;
+    }
+    
+    .primary-icon {
+        font-size: 20px;
+        min-width: 28px;
+    }
+    
+    .primary-name {
+        font-size: 15px;
+    }
+    
+    .product-content {
+        padding: 20px 0;
+    }
+    
+    .category-header {
+        margin-bottom: 24px;
+        padding: 0 12px;
+    }
+    
+    .category-title {
+        font-size: 24px;
+    }
+    
+    .category-desc {
+        font-size: 15px;
+    }
+    
     .product-grid {
         grid-template-columns: repeat(4, 1fr);
+        gap: 24px;
+    }
+    
+    .product-card {
+        border-radius: 14px;
+    }
+    
+    .product-info {
+        padding: 20px;
+    }
+    
+    .product-name {
+        font-size: 16px;
+    }
+    
+    .product-spec {
+        font-size: 14px;
+    }
+    
+    .price-value {
+        font-size: 22px;
     }
 }
 
+/* 大桌面端 (1400px以上) */
 @media screen and (min-width: 1400px) {
+    .category-content {
+        max-width: 1600px;
+        gap: 40px;
+        padding: 0 32px;
+    }
+    
+    .primary-category {
+        width: 200px;
+        padding: 20px 0;
+    }
+    
+    .primary-item {
+        padding: 18px 24px;
+        margin: 8px 16px;
+        border-radius: 12px;
+    }
+    
+    .primary-icon {
+        font-size: 22px;
+        min-width: 32px;
+    }
+    
+    .primary-name {
+        font-size: 16px;
+    }
+    
+    .product-content {
+        padding: 24px 0;
+    }
+    
+    .category-header {
+        margin-bottom: 28px;
+        padding: 0 16px;
+    }
+    
+    .category-title {
+        font-size: 26px;
+    }
+    
+    .category-desc {
+        font-size: 16px;
+    }
+    
     .product-grid {
         grid-template-columns: repeat(5, 1fr);
+        gap: 28px;
+    }
+    
+    .product-card {
+        border-radius: 16px;
+    }
+    
+    .product-image {
+        height: 180px;
+    }
+    
+    .product-info {
+        padding: 24px;
+    }
+    
+    .product-name {
+        font-size: 17px;
+    }
+    
+    .product-spec {
+        font-size: 15px;
+    }
+    
+    .price-value {
+        font-size: 24px;
     }
 }
 </style>
\ No newline at end of file
diff --git a/pages/mall/consumer/category.uvue b/pages/mall/consumer/category.uvue
index 5c02cd56..ec734cdf 100644
--- a/pages/mall/consumer/category.uvue
+++ b/pages/mall/consumer/category.uvue
@@ -111,320 +111,60 @@
 
 <script setup lang="uts">
 import { ref, onMounted } from 'vue'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Category, Product } from '@/utils/supabaseService.uts'
 
 // 响应式数据
 const statusBarHeight = ref(0)
 const headerHeight = ref(44) // 默认头部高度
-const primaryCategories = ref<any[]>([])
-const productList = ref<any[]>([])
-const activePrimary = ref<string>('cold')
+const primaryCategories = ref<Category[]>([])
+const productList = ref<Product[]>([])
+const activePrimary = ref<string>('')
 const cartCount = ref(3)
 const hasMore = ref(true)
 
 // 获取当前分类信息
-const currentCategoryName = ref('感冒发烧')
-const currentCategoryDesc = ref('解热镇痛')
+const currentCategoryName = ref('')
+const currentCategoryDesc = ref('')
 
 // 页面参数
 const pageParams = ref<any>({})
 
-// 医药分类数据（与主页一致）
-const medicineCategories = [
-    { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
-    { id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
-    { id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
-    { id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
-    { id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
-    { id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
-    { id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
-    { id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
-    { id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
-    { id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
-]
-
-// Mock 商品数据 - 使用本地图片避免网络请求
-const mockProducts = {
-    cold: [
-        {
-            id: 'cold1',
-            shopId: 'shop_001',
-            shopName: '修正药业官方旗舰店',
-            name: '布洛芬缓释胶囊',
-            specification: '0.3g*24粒',
-            price: 18.5,
-            originalPrice: 25.8,
-            image: '/static/images/default-product.png',
-            manufacturer: '修正药业',
-            sales: 2560,
-            badge: '热销'
-        },
-        {
-            id: 'cold2',
-            shopId: 'shop_002',
-            shopName: '白云山大药房',
-            name: '板蓝根颗粒',
-            specification: '10g*20袋',
-            price: 22.8,
-            originalPrice: 29.9,
-            image: '/static/images/default-product.png',
-            manufacturer: '白云山',
-            sales: 1890,
-            badge: '推荐'
-        },
-        {
-            id: 'cold3',
-            shopId: 'shop_003',
-            shopName: '以岭药业自营店',
-            name: '连花清瘟胶囊',
-            specification: '0.35g*36粒',
-            price: 42.8,
-            originalPrice: 48.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '以岭药业',
-            sales: 3200,
-            badge: '爆款'
-        },
-        {
-            id: 'cold4',
-            shopId: 'shop_004',
-            shopName: '强生制药旗舰店',
-            name: '对乙酰氨基酚片',
-            specification: '0.5g*12片',
-            price: 8.9,
-            originalPrice: 12.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '强生制药',
-            sales: 1420,
-            badge: '特价'
-        },
-        {
-            id: 'cold5',
-            shopId: 'shop_005',
-            shopName: '同仁堂大药房',
-            name: '感冒清热颗粒',
-            specification: '3g*10袋',
-            price: 16.5,
-            originalPrice: 19.9,
-            image: '/static/images/default-product.png',
-            manufacturer: '同仁堂',
-            sales: 980,
-            badge: '新品'
-        },
-        {
-            id: 'cold6',
-            shopId: 'shop_006',
-            shopName: '三九医药旗舰店',
-            name: '复方氨酚烷胺片',
-            specification: '10片/盒',
-            price: 12.8,
-            originalPrice: 15.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '三九医药',
-            sales: 1650,
-            badge: '家庭装'
-        }
-    ],
-    
-    stomach: [
-        {
-            id: 'stomach1',
-            shopId: 'shop_006',
-            shopName: '三九医药旗舰店',
-            name: '胃康灵胶囊',
-            specification: '0.4g*24粒',
-            price: 32.8,
-            originalPrice: 38.5,
-            image: '/static/images/default-product.png',
-            manufacturer: '三九医药',
-            sales: 890,
-            badge: '热销'
-        },
-        {
-            id: 'stomach2',
-            shopId: 'shop_007',
-            shopName: '阿斯利康医药',
-            name: '奥美拉唑肠溶胶囊',
-            specification: '20mg*14粒',
-            price: 28.5,
-            originalPrice: 35.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '阿斯利康',
-            sales: 1250,
-            badge: '处方药'
-        },
-        {
-            id: 'stomach3',
-            shopId: 'shop_008',
-            shopName: '江中制药旗舰店',
-            name: '健胃消食片',
-            specification: '0.8g*32片',
-            price: 15.9,
-            originalPrice: 19.9,
-            image: '/static/images/default-product.png',
-            manufacturer: '江中制药',
-            sales: 2100,
-            badge: '推荐'
-        },
-        {
-            id: 'stomach4',
-            shopId: 'shop_009',
-            shopName: '益普生大药房',
-            name: '蒙脱石散',
-            specification: '3g*10袋',
-            price: 18.6,
-            originalPrice: 22.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '益普生',
-            sales: 1780,
-            badge: '止泻'
-        },
-        {
-            id: 'stomach5',
-            shopId: 'shop_010',
-            shopName: '西安杨森旗舰店',
-            name: '多潘立酮片',
-            specification: '10mg*30片',
-            price: 22.8,
-            originalPrice: 26.5,
-            image: '/static/images/default-product.png',
-            manufacturer: '西安杨森',
-            sales: 950,
-            badge: '促消化'
-        },
-        {
-            id: 'stomach6',
-            shopId: 'shop_011',
-            shopName: '拜耳医药自营店',
-            name: '铝碳酸镁咀嚼片',
-            specification: '0.5g*20片',
-            price: 25.9,
-            originalPrice: 29.9,
-            image: '/static/images/default-product.png',
-            manufacturer: '拜耳',
-            sales: 1320,
-            badge: '护胃'
-        }
-    ],
-    
-    pain: [
-        {
-            id: 'pain1',
-            shopId: 'shop_012',
-            shopName: '华北制药旗舰店',
-            name: '阿莫西林胶囊',
-            specification: '0.25g*24粒',
-            price: 28.5,
-            originalPrice: 35.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '华北制药',
-            sales: 1560,
-            badge: '处方药'
-        },
-        {
-            id: 'pain2',
-            shopId: 'shop_013',
-            shopName: '诺华制药旗舰店',
-            name: '双氯芬酸钠缓释片',
-            specification: '75mg*10片',
-            price: 19.8,
-            originalPrice: 24.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '诺华制药',
-            sales: 1280,
-            badge: '止痛'
-        },
-        {
-            id: 'pain3',
-            shopId: 'shop_014',
-            shopName: '云南白药旗舰店',
-            name: '云南白药胶囊',
-            specification: '0.25g*32粒',
-            price: 35.9,
-            originalPrice: 42.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '云南白药',
-            sales: 2350,
-            badge: '经典'
-        },
-        {
-            id: 'pain4',
-            shopId: 'shop_015',
-            shopName: '辉瑞医药旗舰店',
-            name: '塞来昔布胶囊',
-            specification: '0.2g*10粒',
-            price: 48.6,
-            originalPrice: 55.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '辉瑞',
-            sales: 890,
-            badge: '抗炎'
-        },
-        {
-            id: 'pain5',
-            shopId: 'shop_016',
-            shopName: '中美史克大药房',
-            name: '布洛芬片',
-            specification: '0.1g*24片',
-            price: 12.5,
-            originalPrice: 15.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '中美史克',
-            sales: 1680,
-            badge: '经济装'
-        },
-        {
-            id: 'pain6',
-            shopId: 'shop_002',
-            shopName: '白云山大药房',
-            name: '头孢克肟胶囊',
-            specification: '0.1g*6粒',
-            price: 32.8,
-            originalPrice: 38.0,
-            image: '/static/images/default-product.png',
-            manufacturer: '广州白云山',
-            sales: 1120,
-            badge: '抗生素'
-        }
-    ]
-}
-
-// 补充其他分类的默认数据（简化版）
-const generateDefaultProducts = (categoryId: string) => {
-    const baseProducts = [
-        { name: '通用药品1', price: 25.8, manufacturer: '知名药企', sales: 1200 },
-        { name: '通用药品2', price: 18.5, manufacturer: '知名药企', sales: 950 },
-        { name: '通用药品3', price: 32.0, manufacturer: '知名药企', sales: 1450 },
-        { name: '通用药品4', price: 22.8, manufacturer: '知名药企', sales: 880 },
-        { name: '通用药品5', price: 28.9, manufacturer: '知名药企', sales: 1100 },
-        { name: '通用药品6', price: 19.9, manufacturer: '知名药企', sales: 920 }
-    ]
-    
-    return baseProducts.map((product, index) => ({
-        id: `${categoryId}${index + 1}`,
-        shopId: `shop_default_${categoryId}_${index}`, // 确保不同分类店铺ID不同
-        shopName: '平台自营大药房',
-        ...product,
-        specification: '规格待定',
-        originalPrice: product.price * 1.2,
-        image: '/static/images/default-product.png',
-        badge: index === 0 ? '热销' : index === 1 ? '推荐' : ''
-    }))
-}
 
 // 生命周期
-onMounted(() => {
-    initPage()
-    
-    console.log('=== category页面onMounted被调用 ===')
-    
-    // 在onMounted中只初始化页面，不处理分类参数
-    // 分类参数的处理交给onLoad函数，因为onLoad在页面加载时执行
-    console.log('onMounted中不处理分类参数，等待onLoad处理')
-    
-    // 注意：这里不再默认选择分类，让onLoad函数处理分类选择
-    // 如果onLoad没有设置分类，则保持默认状态
+onMounted(async() => {
+	  await loadCategories()
+	  await loadProducts()
 })
 
+// 添加加载分类的方法
+const loadCategories = async () => {
+  const categories = await supabaseService.getCategories()
+  if (categories.length > 0) {
+    primaryCategories.value = categories
+    // 设置默认选中第一个分类
+    if (!activePrimary.value && categories[0]) {
+      activePrimary.value = categories[0].id
+    }
+  }
+}
+
+// 加载商品数据
+const loadProducts = async () => {
+  if (activePrimary.value) {
+    const response = await supabaseService.getProductsByCategory(activePrimary.value)
+    productList.value = response.data
+    hasMore.value = response.hasmore
+    
+    // 更新当前分类信息
+    const category = primaryCategories.value.find(cat => cat.id === activePrimary.value)
+    if (category) {
+      currentCategoryName.value = category.name
+      currentCategoryDesc.value = category.description
+    }
+  }
+}
+
 // 页面加载时处理参数 - 这是处理分类切换的主要入口
 onLoad((options: any) => {
 	console.log('=== category页面onLoad被调用 ===')
@@ -478,15 +218,8 @@ onLoad((options: any) => {
 			}, 100)
 		}
 	} else {
-		console.log('⚠️ onLoad中未找到分类参数，使用默认分类')
-		// 默认选中第一个分类
-		const defaultCategory = 'cold'
-		console.log('默认分类:', defaultCategory)
-		
-		// 无论如何都重新加载一次默认分类的数据
-		setTimeout(() => {
-			selectPrimaryCategory(defaultCategory)
-		}, 100)
+		console.log('⚠️ onLoad中未找到分类参数，将使用从数据库加载的第一个分类')
+		// 不再使用硬编码的默认分类，loadCategories 会设置第一个分类
 	}
 	
 	console.log('=== category页面onLoad执行完成 ===')
@@ -566,36 +299,22 @@ onShow(() => {
 	console.log('=== category页面onShow执行完成 ===')
 })
 
-// 初始化页面
-const initPage = () => {
-    const systemInfo = uni.getSystemInfoSync()
-    statusBarHeight.value = systemInfo.statusBarHeight || 0
-    
-    // 保持与主页一致的固定高度计算，不进行动态调整
-    // 这样在移动端会与主页的视觉体验保持一致（主页占位符固定为44px）
-    headerHeight.value = 10
-    
-    // 获取页面参数
-    const pages = getCurrentPages()
-    if (pages.length > 0) {
-        const currentPage = pages[pages.length - 1]
-        pageParams.value = currentPage.options || {}
-    }
-    
-    // 加载分类数据
-    primaryCategories.value = medicineCategories
-}
 
 // 选择一级分类
-const selectPrimaryCategory = (categoryId: string) => {
+const selectPrimaryCategory = async (categoryId: string) => {
     console.log('=== selectPrimaryCategory函数开始执行 ===')
     console.log('传入的categoryId:', categoryId)
     console.log('当前时间:', Date.now())
     
     // 验证categoryId是否有效
     if (!categoryId) {
-        console.error('categoryId为空，使用默认分类')
-        categoryId = 'cold'
+        console.error('categoryId为空，尝试使用第一个分类')
+        if (primaryCategories.value.length > 0) {
+            categoryId = primaryCategories.value[0].id
+        } else {
+            console.error('没有可用的分类')
+            return
+        }
     }
     
     console.log('验证后的categoryId:', categoryId)
@@ -606,18 +325,18 @@ const selectPrimaryCategory = (categoryId: string) => {
     console.log('更新后的activePrimary:', activePrimary.value)
     
     // 更新当前分类信息
-    const category = medicineCategories.find(cat => cat.id === categoryId)
+    const category = primaryCategories.value.find(cat => cat.id === categoryId)
     if (category) {
         currentCategoryName.value = category.name
-        currentCategoryDesc.value = category.desc
-        console.log('✅ 找到分类:', category.name, '描述:', category.desc)
+        currentCategoryDesc.value = category.description
+        console.log('✅ 找到分类:', category.name, '描述:', category.description)
     } else {
-        console.error('❌ 未找到分类ID:', categoryId, '，使用默认分类')
+        console.error('❌ 未找到分类ID:', categoryId, '，使用第一个分类')
         // 如果找不到对应的分类，使用第一个分类
-        if (medicineCategories.length > 0) {
-            const firstCategory = medicineCategories[0]
+        if (primaryCategories.value.length > 0) {
+            const firstCategory = primaryCategories.value[0]
             currentCategoryName.value = firstCategory.name
-            currentCategoryDesc.value = firstCategory.desc
+            currentCategoryDesc.value = firstCategory.description
             activePrimary.value = firstCategory.id
             categoryId = firstCategory.id
             console.log('使用默认分类:', firstCategory.name)
@@ -626,22 +345,15 @@ const selectPrimaryCategory = (categoryId: string) => {
     
     console.log('准备加载商品数据...')
     
-    // 加载对应商品
-    if (mockProducts[categoryId]) {
-        productList.value = mockProducts[categoryId]
-        console.log('✅ 加载mock商品数据成功')
-        console.log('分类:', categoryId)
-        console.log('商品数量:', mockProducts[categoryId].length)
-        console.log('商品列表:', mockProducts[categoryId])
-    } else {
-        productList.value = generateDefaultProducts(categoryId)
-        console.log('✅ 加载默认商品数据成功')
-        console.log('分类:', categoryId)
-        console.log('商品数量:', productList.value.length)
-        console.log('商品列表:', productList.value)
-    }
+    // 加载对应商品 - 使用 Supabase 服务
+    const response = await supabaseService.getProductsByCategory(categoryId)
+    productList.value = response.data
+    hasMore.value = response.hasmore
     
-    hasMore.value = true
+    console.log('✅ 加载商品数据成功')
+    console.log('分类:', categoryId)
+    console.log('商品数量:', response.data.length)
+    console.log('商品列表:', response.data)
     
     // 验证数据是否已正确更新
     console.log('数据更新验证:')
@@ -702,7 +414,7 @@ const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/searc
 const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
 const navigateToProduct = (product: any) => {
     uni.navigateTo({
-        url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}`
+        url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}&name=${encodeURIComponent(product.name)}&image=${encodeURIComponent(product.image || '')}`
     })
 }
 
@@ -1416,4 +1128,4 @@ const onScan = () => {
         font-size: 24px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mall/consumer/category完成分类及商品数据获取.uvue b/pages/mall/consumer/category完成分类及商品数据获取.uvue
new file mode 100644
index 00000000..897375f2
--- /dev/null
+++ b/pages/mall/consumer/category完成分类及商品数据获取.uvue
@@ -0,0 +1,1131 @@
+<template>
+    <view class="category-page">
+        <!-- 顶部搜索栏 -->
+        <view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+            <view class="search-container">
+                <view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
+                    <!-- 模拟输入框 -->
+                    <text class="search-placeholder">请输入药品名称、症状或品牌</text>
+                    
+                    <!-- 扫码图标 -->
+                    <view class="nav-icon-btn" @click.stop="onScan">
+                        <text class="nav-icon">🔳</text>
+                    </view>
+
+                    <!-- 相机图标 -->
+                    <view class="nav-camera-btn" @click.stop="onCamera">
+                        <text class="nav-camera-icon">📷</text>
+                    </view>
+                    
+                    <!-- 搜索按钮 -->
+                    <view class="nav-inner-search-btn" :style="{ height: '22px' }">
+                        <text class="nav-inner-search-text">搜索</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 分类内容区 -->
+        <view 
+            class="category-content"
+            :style="{ 
+                marginTop: (statusBarHeight + headerHeight + 10) + 'px',
+                height: `calc(100vh - ${statusBarHeight + headerHeight + 10}px)`
+            }"
+        >
+            <!-- 左侧一级分类 -->
+            <scroll-view scroll-y class="primary-category">
+                <view 
+                    v-for="item in primaryCategories" 
+                    :key="item.id"
+                    :class="['primary-item', { active: activePrimary === item.id }]"
+                    @click="selectPrimaryCategory(item.id)"
+                    :style="{ backgroundColor: activePrimary === item.id ? item.color : 'transparent' }"
+                >
+                    <text class="primary-icon">{{ item.icon }}</text>
+                    <text class="primary-name">{{ item.name }}</text>
+                </view>
+            </scroll-view>
+            
+            <!-- 右侧商品列表 -->
+            <scroll-view scroll-y class="product-content">
+                <!-- 分类标题 -->
+                <view class="category-header">
+                    <text class="category-title">{{ currentCategoryName }}</text>
+                    <text class="category-desc">{{ currentCategoryDesc }}</text>
+                </view>
+                
+                <!-- 商品网格 -->
+                <view v-if="productList.length > 0" class="product-grid">
+                    <view 
+                        v-for="product in productList" 
+                        :key="product.id"
+                        class="product-card"
+                        @click="navigateToProduct(product)"
+                    >
+                        <view class="product-badge" v-if="product.badge">{{ product.badge }}</view>
+                        <image 
+                            class="product-image" 
+                            :src="product.image" 
+                            mode="aspectFill"
+                        />
+                        <view class="product-info">
+                            <text class="product-name">{{ product.name }}</text>
+                            <text class="product-spec">{{ product.specification }}</text>
+                            
+                            <view class="price-section">
+                                <view class="current-price">
+                                    <text class="price-symbol">¥</text>
+                                    <text class="price-value">{{ product.price }}</text>
+                                </view>
+                                <text class="original-price" v-if="product.originalPrice > product.price">
+                                    ¥{{ product.originalPrice }}
+                                </text>
+                            </view>
+                            
+                            <view class="product-meta">
+                                <text class="manufacturer">{{ product.manufacturer }}</text>
+                                <view class="sales-info">
+                                    <text class="sales-count">已售{{ product.sales }}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                
+                <!-- 空状态 -->
+                <view v-else class="empty-state">
+                    <text class="empty-icon">💊</text>
+                    <text class="empty-text">暂无相关药品</text>
+                    <text class="empty-desc">该分类下暂无商品，敬请期待</text>
+                </view>
+                
+                <!-- 加载更多提示 -->
+                <view v-if="hasMore" class="load-more">
+                    <text class="load-text">上拉加载更多</text>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Category, Product } from '@/utils/supabaseService.uts'
+
+// 响应式数据
+const statusBarHeight = ref(0)
+const headerHeight = ref(44) // 默认头部高度
+const primaryCategories = ref<Category[]>([])
+const productList = ref<Product[]>([])
+const activePrimary = ref<string>('')
+const cartCount = ref(3)
+const hasMore = ref(true)
+
+// 获取当前分类信息
+const currentCategoryName = ref('')
+const currentCategoryDesc = ref('')
+
+// 页面参数
+const pageParams = ref<any>({})
+
+
+// 生命周期
+onMounted(async() => {
+	  await loadCategories()
+	  await loadProducts()
+})
+
+// 添加加载分类的方法
+const loadCategories = async () => {
+  const categories = await supabaseService.getCategories()
+  if (categories.length > 0) {
+    primaryCategories.value = categories
+    // 设置默认选中第一个分类
+    if (!activePrimary.value && categories[0]) {
+      activePrimary.value = categories[0].id
+    }
+  }
+}
+
+// 加载商品数据
+const loadProducts = async () => {
+  if (activePrimary.value) {
+    const response = await supabaseService.getProductsByCategory(activePrimary.value)
+    productList.value = response.data
+    hasMore.value = response.hasmore
+    
+    // 更新当前分类信息
+    const category = primaryCategories.value.find(cat => cat.id === activePrimary.value)
+    if (category) {
+      currentCategoryName.value = category.name
+      currentCategoryDesc.value = category.description
+    }
+  }
+}
+
+// 页面加载时处理参数 - 这是处理分类切换的主要入口
+onLoad((options: any) => {
+	console.log('=== category页面onLoad被调用 ===')
+	console.log('页面加载时间:', Date.now())
+	console.log('传入的options参数:', options)
+	console.log('当前活动分类:', activePrimary.value)
+	
+	let categoryId = ''
+	let categoryName = ''
+	
+	// 首先检查传入的options参数
+	if (options && options.categoryId) {
+		categoryId = options.categoryId
+		categoryName = options.name || ''
+		console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
+	}
+	
+	// 如果options中没有，尝试从getCurrentPages()获取
+	if (!categoryId) {
+		const pages = getCurrentPages()
+		if (pages.length > 0) {
+			const currentPage = pages[pages.length - 1]
+			const pageOptions = currentPage.options || {}
+			console.log('从getCurrentPages()获取参数:', pageOptions)
+			
+			if (pageOptions.categoryId) {
+				categoryId = pageOptions.categoryId
+				categoryName = pageOptions.name || ''
+				console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
+			}
+		}
+	}
+	
+	// 如果有找到分类ID，则选中对应的分类
+	if (categoryId) {
+		console.log('✅ 准备选中分类:', categoryId)
+		console.log('分类名称:', categoryName || '未指定')
+		
+		// 检查是否需要更新分类
+		if (activePrimary.value !== categoryId) {
+			console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
+			console.log('准备调用selectPrimaryCategory函数...')
+			selectPrimaryCategory(categoryId)
+		} else {
+			console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
+			console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
+			// 即使分类相同，也重新加载数据，确保数据是最新的
+			// 添加一个小的延迟，确保页面完全显示后再更新数据
+			setTimeout(() => {
+				selectPrimaryCategory(categoryId)
+			}, 100)
+		}
+	} else {
+		console.log('⚠️ onLoad中未找到分类参数，将使用从数据库加载的第一个分类')
+		// 不再使用硬编码的默认分类，loadCategories 会设置第一个分类
+	}
+	
+	console.log('=== category页面onLoad执行完成 ===')
+})
+
+// 页面显示时也检查参数，确保从其他页面返回时能正确显示
+onShow(() => {
+	console.log('=== category页面onShow被调用 ===')
+	console.log('页面显示时间:', Date.now())
+	console.log('当前活动分类:', activePrimary.value)
+	
+	// 在onShow中，我们也需要检查是否有新的参数
+	// 因为当从主页再次点击分类跳转过来时，可能不会触发onLoad
+	// 而是触发onShow
+	
+	// 获取当前页面实例和参数
+	const pages = getCurrentPages()
+	if (pages.length > 0) {
+		const currentPage = pages[pages.length - 1]
+		const pageOptions = currentPage.options || {}
+		console.log('onShow中获取参数:', pageOptions)
+		
+		// 检查是否有分类参数
+		if (pageOptions.categoryId) {
+			const categoryId = pageOptions.categoryId
+			const categoryName = pageOptions.name || ''
+			
+			console.log('✅ onShow中找到分类参数:', categoryId, categoryName)
+			console.log('URL中的时间戳参数:', pageOptions.timestamp)
+			console.log('URL中的随机参数:', pageOptions.random)
+			
+			// 检查是否需要更新分类
+			if (activePrimary.value !== categoryId) {
+				console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
+				console.log('准备调用selectPrimaryCategory函数...')
+				selectPrimaryCategory(categoryId)
+			} else {
+				console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
+				console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
+				// 即使分类相同，也重新加载数据，确保数据是最新的
+				// 添加一个小的延迟，确保页面完全显示后再更新数据
+				setTimeout(() => {
+					selectPrimaryCategory(categoryId)
+				}, 100)
+			}
+		} else {
+			console.log('⚠️ onShow中未找到分类参数')
+			console.log('尝试从URL中解析参数...')
+			
+			// 尝试从当前页面的URL中解析参数
+			const currentUrl = currentPage.route || ''
+			console.log('当前页面路由:', currentUrl)
+			
+			// 如果URL中有查询参数，尝试解析
+			if (currentPage.$page && currentPage.$page.fullPath) {
+				const fullPath = currentPage.$page.fullPath
+				console.log('完整路径:', fullPath)
+				
+				// 尝试解析查询参数
+				const queryIndex = fullPath.indexOf('?')
+				if (queryIndex > -1) {
+					const queryString = fullPath.substring(queryIndex + 1)
+					console.log('查询字符串:', queryString)
+					
+					// 简单解析查询参数
+					const params = new URLSearchParams(queryString)
+					const urlCategoryId = params.get('categoryId')
+					if (urlCategoryId) {
+						console.log('✅ 从URL解析到分类参数:', urlCategoryId)
+						selectPrimaryCategory(urlCategoryId)
+					}
+				}
+			}
+		}
+	}
+	
+	console.log('=== category页面onShow执行完成 ===')
+})
+
+
+// 选择一级分类
+const selectPrimaryCategory = async (categoryId: string) => {
+    console.log('=== selectPrimaryCategory函数开始执行 ===')
+    console.log('传入的categoryId:', categoryId)
+    console.log('当前时间:', Date.now())
+    
+    // 验证categoryId是否有效
+    if (!categoryId) {
+        console.error('categoryId为空，尝试使用第一个分类')
+        if (primaryCategories.value.length > 0) {
+            categoryId = primaryCategories.value[0].id
+        } else {
+            console.error('没有可用的分类')
+            return
+        }
+    }
+    
+    console.log('验证后的categoryId:', categoryId)
+    console.log('当前activePrimary的值:', activePrimary.value)
+    
+    // 更新活动分类
+    activePrimary.value = categoryId
+    console.log('更新后的activePrimary:', activePrimary.value)
+    
+    // 更新当前分类信息
+    const category = primaryCategories.value.find(cat => cat.id === categoryId)
+    if (category) {
+        currentCategoryName.value = category.name
+        currentCategoryDesc.value = category.description
+        console.log('✅ 找到分类:', category.name, '描述:', category.description)
+    } else {
+        console.error('❌ 未找到分类ID:', categoryId, '，使用第一个分类')
+        // 如果找不到对应的分类，使用第一个分类
+        if (primaryCategories.value.length > 0) {
+            const firstCategory = primaryCategories.value[0]
+            currentCategoryName.value = firstCategory.name
+            currentCategoryDesc.value = firstCategory.description
+            activePrimary.value = firstCategory.id
+            categoryId = firstCategory.id
+            console.log('使用默认分类:', firstCategory.name)
+        }
+    }
+    
+    console.log('准备加载商品数据...')
+    
+    // 加载对应商品 - 使用 Supabase 服务
+    const response = await supabaseService.getProductsByCategory(categoryId)
+    productList.value = response.data
+    hasMore.value = response.hasmore
+    
+    console.log('✅ 加载商品数据成功')
+    console.log('分类:', categoryId)
+    console.log('商品数量:', response.data.length)
+    console.log('商品列表:', response.data)
+    
+    // 验证数据是否已正确更新
+    console.log('数据更新验证:')
+    console.log('activePrimary:', activePrimary.value)
+    console.log('currentCategoryName:', currentCategoryName.value)
+    console.log('currentCategoryDesc:', currentCategoryDesc.value)
+    console.log('productList长度:', productList.value.length)
+    
+    console.log('=== selectPrimaryCategory函数执行完成 ===')
+}
+
+// 添加到购物车
+const addToCart = (product: any) => {
+    // 获取现有购物车数据
+    const cartData = uni.getStorageSync('cart')
+    let cartItems: any[] = []
+    
+    if (cartData) {
+        try {
+            cartItems = JSON.parse(cartData as string) as any[]
+        } catch (e) {
+            console.error('解析购物车数据失败', e)
+        }
+    }
+    
+    // 检查商品是否已存在
+    const existingItem = cartItems.find((item: any) => item.id === product.id)
+    
+    if (existingItem) {
+        existingItem.quantity++
+    } else {
+        // 添加新商品
+        cartItems.push({
+            id: product.id,
+            shopId: product.shopId || 'shop_default',
+            shopName: product.shopName || product.manufacturer || '自营店铺',
+            name: product.name,
+            price: product.price,
+            image: product.image,
+            spec: product.specification || '默认规格',
+            quantity: 1,
+            selected: true
+        })
+    }
+    
+    // 保存回存储
+    uni.setStorageSync('cart', JSON.stringify(cartItems))
+    
+    uni.showToast({
+        title: '已添加到购物车',
+        icon: 'success'
+    })
+    cartCount.value++
+}
+
+// 导航函数
+const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
+const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
+const navigateToProduct = (product: any) => {
+    uni.navigateTo({
+        url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}`
+    })
+}
+
+// 相机功能
+const onCamera = () => {
+    uni.chooseImage({
+        count: 1,
+        sourceType: ['camera'],
+        success: (res) => {
+            console.log('相机拍摄成功:', res.tempFilePaths[0])
+            uni.showToast({
+                title: '已拍摄，正在识别...',
+                icon: 'loading'
+            })
+            // 这里可以添加后续的识别逻辑
+            setTimeout(() => {
+                 uni.showToast({
+                    title: '识别成功',
+                    icon: 'success'
+                })
+            }, 1000)
+        },
+        fail: (err) => {
+            console.error('相机调用失败:', err)
+        }
+    })
+}
+
+// 扫码功能
+const onScan = () => {
+    uni.scanCode({
+        success: (res) => {
+            console.log('扫码成功:', res)
+            uni.showToast({
+                title: '扫码成功: ' + res.result,
+                icon: 'none'
+            })
+        },
+        fail: (err) => {
+            console.error('扫码失败:', err)
+        }
+    })
+}
+</script>
+
+<style>
+.category-page {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f8fafc;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+}
+/* 搜索栏 */
+.search-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+    z-index: 1000;
+    box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
+}
+
+/* 搜索栏 */
+/* 导航栏搜索框容器内边距调整 */
+.search-container {
+    height: 44px; /* 调整为与消息页一致的高度 */
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* 搜索框 hover 效果 */
+.search-box:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 导航栏搜索框容器内边距调整 */
+.search-box {
+    flex: 1;
+    max-width: 600px;
+    background: #f0f0f0;
+    border-radius: 20px;
+    padding: 0 4px 0 12px;
+    display: flex;
+    flex-direction: row; /* UVUE 显式设置 row */
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 100%;
+    height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
+}
+
+.search-placeholder {
+    font-size: 14px;
+    color: #999;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.nav-inner-search-text {
+    font-size: 12px; /* 字体稍微变小 */
+    color: #ffffff;
+    font-weight: 500;
+}
+
+.icon {
+    font-size: 22px;
+    color: white;
+}
+
+.nav-icon-btn {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #ddd;
+    margin-right: 8px;
+}
+
+.nav-icon {
+    font-size: 18px;
+}
+
+.nav-camera-btn {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-right-color: #ddd;
+    border-right: 1px solid #ddd; /* 修复UVUE样式 */
+    margin-right: 8px;
+}
+
+.nav-camera-icon {
+    font-size: 20px;
+}
+
+/* 搜索按钮高度微调 */
+.nav-inner-search-btn {
+    padding: 0 12px; /* 减小内边距 */
+    background-color: #87CEEB; /* 天空蓝 */
+    border-radius: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 24px; /* 随搜索框高度减小而减小 */
+}
+
+.cart-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    background: #FF5722;
+    color: white;
+    font-size: 10px;
+    min-width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border: 2px solid #4CAF50;
+}
+
+/* 分类内容区 */
+.category-content {
+    display: flex;
+    flex-direction: row; /* 强制水平排列 */
+    /* margin-top: 44px; 已通过 style 动态绑定 */
+    padding: 0 16px;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    gap: 20px;
+    /* height: calc(100vh - 44px); 已通过 style 动态绑定 */
+    overflow: hidden; /* 防止整体滚动 */
+}
+
+/* 左侧一级分类 */
+.primary-category {
+    width: 120px;
+    height: 100%; /* 占满父容器高度 */
+    background: white;
+    border-radius: 12px;
+    padding: 12px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    flex-shrink: 0;
+    overflow-y: auto; /* 允许内部滚动 */
+}
+
+.primary-item {
+    display: flex;
+    flex-direction: column; /* 图标和文字垂直排列 */
+    align-items: center;
+    justify-content: center;
+    padding: 12px 8px;
+    margin: 4px 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #666;
+    text-align: center;
+}
+
+.primary-item:hover {
+    transform: translateY(-2px); /* 悬停时向上浮动 */
+}
+
+.primary-item.active {
+    color: white !important;
+    font-weight: bold;
+}
+
+.primary-icon {
+    font-size: 24px;
+    margin-bottom: 6px;
+    margin-right: 0; /* 移除右边距 */
+    text-align: center;
+    display: block;
+}
+
+.primary-name {
+    font-size: 13px;
+    line-height: 1.4;
+    display: block;
+}
+
+/* 右侧内容区 */
+.product-content {
+    flex: 1;
+    height: 100%; /* 占满父容器高度 */
+    padding: 0; /* 移除内边距，交给内部元素 */
+    overflow-y: auto; /* 允许内部滚动 */
+}
+
+.category-header {
+    margin-bottom: 16px;
+    padding: 16px 8px 0 8px;
+    position: sticky;
+    top: 0;
+    background-color: #f8fafc;
+    z-index: 10;
+}
+
+.category-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.category-desc {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 商品网格 */
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.product-card {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid #e0e0e0;
+    position: relative;
+}
+
+.product-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.product-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: #FF5722;
+    color: white;
+    font-size: 11px;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-weight: 600;
+    z-index: 2;
+}
+
+.product-image {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    background: white;
+}
+
+.product-info {
+    padding: 16px;
+}
+
+.product-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+    display: block;
+    line-height: 1.4;
+}
+
+.product-spec {
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 12px;
+    display: block;
+}
+
+.price-section {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.current-price {
+    display: flex;
+    align-items: baseline;
+}
+
+.price-symbol {
+    font-size: 14px;
+    color: #FF5722;
+}
+
+.price-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #FF5722;
+    margin-left: 2px;
+}
+
+.original-price {
+    font-size: 13px;
+    color: #999;
+    text-decoration: line-through;
+}
+
+.product-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 12px;
+}
+
+.manufacturer {
+    color: #666;
+}
+
+.sales-count {
+    color: #999;
+}
+
+.product-action {
+    margin-top: 12px;
+}
+
+.cart-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background: #4CAF50;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cart-btn:hover {
+    background: #388E3C;
+}
+
+.cart-icon {
+    font-size: 14px;
+}
+
+/* 空状态 */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 60px;
+    color: #4CAF50;
+    margin-bottom: 15px;
+}
+
+.empty-text {
+    font-size: 18px;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+.empty-desc {
+    font-size: 14px;
+    color: #666;
+}
+
+/* 加载更多 */
+.load-more {
+    text-align: center;
+    padding: 20px 0;
+    color: #999;
+    font-size: 14px;
+}
+
+.load-text {
+    display: inline-block;
+    padding: 8px 16px;
+    background: #f5f5f5;
+    border-radius: 20px;
+}
+
+/* ===== 响应式设计 ===== */
+
+/* 小屏手机 (小于414px) */
+@media screen and (max-width: 414px) {
+    .category-content {
+        /* flex-direction: column; 移除这一行，保持 row 布局 */
+        padding: 0 8px;
+        gap: 10px;
+    }
+    
+    .primary-category {
+        width: 80px; /* 减小宽度 */
+        /* display: flex; 移除flex布局，保持默认 */
+        /* flex-wrap: wrap; 移除换行 */
+        padding: 8px 0;
+    }
+    
+    .primary-item {
+        /* width: calc(25% - 8px); 移除百分比宽度 */
+        width: auto; /* 恢复自动宽度 */
+        margin: 4px;
+        padding: 8px 4px;
+        /* text-align: center; 已经在通用样式中设置 */
+    }
+    
+    .primary-icon {
+        margin-right: 0;
+        margin-bottom: 4px;
+        font-size: 20px;
+    }
+    
+    .primary-name {
+        font-size: 11px;
+    }
+    
+    .product-grid {
+        grid-template-columns: repeat(2, 1fr); /* 改为双列显示 */
+        gap: 8px;
+        padding: 0 4px 20px 4px; /* 增加底部内边距 */
+    }
+    
+    /* 手机端商品卡片极简模式 - 仿照主页样式 */
+    .product-spec,
+    .manufacturer,
+    .original-price,
+    .sales-info,
+    .product-badge { /* 分类页也隐藏角标，保持整洁 */
+        display: none;
+    }
+    
+    .product-info {
+        padding: 6px;
+    }
+    
+    .product-image {
+        height: 100px; /* 由于分类页右侧空间更窄，图片高度设得更小一点 */
+    }
+    
+    .product-name {
+        font-size: 12px;
+        height: 32px;
+        line-height: 1.3;
+        margin-bottom: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    
+    .price-section {
+        margin-bottom: 0;
+        margin-top: 4px;
+        justify-content: space-between;
+        width: 100%;
+    }
+    
+    .price-symbol {
+        font-size: 10px;
+    }
+    
+    .price-value {
+        font-size: 14px;
+    }
+    
+    .product-meta {
+        display: none; /* 隐藏整个元数据行 */
+    }
+    
+    .search-container {
+        padding: 0 12px;
+        height: 55px;
+    }
+    
+    .search-box {
+        padding: 8px 16px;
+    }
+    
+    .category-header {
+        padding: 12px 4px 0 4px;
+    }
+}
+
+/* 中屏手机/小平板 (415px-768px) */
+@media screen and (min-width: 415px) and (max-width: 768px) {
+    .product-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+    }
+}
+
+/* 平板设备 (769px-1024px) */
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+    .product-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+    }
+}
+
+/* 桌面端 (1025px以上) */
+@media screen and (min-width: 1025px) {
+    .category-content {
+        gap: 30px;
+        padding: 0 24px;
+    }
+    
+    .primary-category {
+        width: 160px;
+        padding: 16px 0;
+    }
+    
+    .primary-item {
+        padding: 16px 20px;
+        margin: 6px 12px;
+        border-radius: 10px;
+    }
+    
+    .primary-icon {
+        font-size: 20px;
+        min-width: 28px;
+    }
+    
+    .primary-name {
+        font-size: 15px;
+    }
+    
+    .product-content {
+        padding: 20px 0;
+    }
+    
+    .category-header {
+        margin-bottom: 24px;
+        padding: 0 12px;
+    }
+    
+    .category-title {
+        font-size: 24px;
+    }
+    
+    .category-desc {
+        font-size: 15px;
+    }
+    
+    .product-grid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24px;
+    }
+    
+    .product-card {
+        border-radius: 14px;
+    }
+    
+    .product-info {
+        padding: 20px;
+    }
+    
+    .product-name {
+        font-size: 16px;
+    }
+    
+    .product-spec {
+        font-size: 14px;
+    }
+    
+    .price-value {
+        font-size: 22px;
+    }
+}
+
+/* 大桌面端 (1400px以上) */
+@media screen and (min-width: 1400px) {
+    .category-content {
+        max-width: 1600px;
+        gap: 40px;
+        padding: 0 32px;
+    }
+    
+    .primary-category {
+        width: 200px;
+        padding: 20px 0;
+    }
+    
+    .primary-item {
+        padding: 18px 24px;
+        margin: 8px 16px;
+        border-radius: 12px;
+    }
+    
+    .primary-icon {
+        font-size: 22px;
+        min-width: 32px;
+    }
+    
+    .primary-name {
+        font-size: 16px;
+    }
+    
+    .product-content {
+        padding: 24px 0;
+    }
+    
+    .category-header {
+        margin-bottom: 28px;
+        padding: 0 16px;
+    }
+    
+    .category-title {
+        font-size: 26px;
+    }
+    
+    .category-desc {
+        font-size: 16px;
+    }
+    
+    .product-grid {
+        grid-template-columns: repeat(5, 1fr);
+        gap: 28px;
+    }
+    
+    .product-card {
+        border-radius: 16px;
+    }
+    
+    .product-image {
+        height: 180px;
+    }
+    
+    .product-info {
+        padding: 24px;
+    }
+    
+    .product-name {
+        font-size: 17px;
+    }
+    
+    .product-spec {
+        font-size: 15px;
+    }
+    
+    .price-value {
+        font-size: 24px;
+    }
+}
+</style>
diff --git a/pages/mall/consumer/indexgood.uvue b/pages/mall/consumer/index - 副本 (4)完成分类、热销药品数据获取.uvue
similarity index 70%
rename from pages/mall/consumer/indexgood.uvue
rename to pages/mall/consumer/index - 副本 (4)完成分类、热销药品数据获取.uvue
index f780dd9d..d074d86d 100644
--- a/pages/mall/consumer/indexgood.uvue
+++ b/pages/mall/consumer/index - 副本 (4)完成分类、热销药品数据获取.uvue	
@@ -6,40 +6,34 @@
 			class="smart-navbar" 
 			:style="{ 
 				paddingTop: statusBarHeight + 'px',
-				transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)',
-				opacity: showNavbar ? 1 : 0
+				transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)'
 			}"
 		>
-			<view class="nav-container">
-				<!-- 品牌标识区域 - 响应式显示 -->
-				<view class="brand-section">
-					<!-- 品牌标识 - 在电脑端和平板端显示，小屏幕隐藏 -->
-					<view class="brand-logo-area" :class="{ 'hidden-on-mobile': isMobile }">
-						<view class="brand-info">
-							<text class="brand-name">康乐医药商城</text>
-							<text class="brand-tag">官方认证·正品保障</text>
-						</view>
+			<view class="search-container">
+				<view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
+					<!-- 模拟输入框 -->
+					<text class="search-placeholder">请输入药品名称、症状或品牌</text>
+					
+					<!-- 扫码图标 -->
+					<view class="nav-icon-btn" @click.stop="onScan">
+						<text class="nav-icon">🔳</text>
+					</view>
+
+					<!-- 相机图标 -->
+					<view class="nav-camera-btn" @click.stop="onCamera">
+						<text class="nav-camera-icon">📷</text>
 					</view>
 					
-					<!-- 导航栏内搜索框 - 自适应平铺 -->
-					<view class="nav-search-container">
-						<view class="nav-search" @click="navigateToSearch">
-							<view class="nav-search-box">
-								<text class="nav-search-icon">🔍</text>
-								<!-- 小屏幕只显示搜索图标，隐藏搜索工具 -->
-								<view class="nav-search-tools" :class="{ 'hidden-on-mobile': isMobile }">
-									<text class="nav-tool-item">语音</text>
-									<text class="nav-tool-item">拍照</text>
-								</view>
-							</view>
-						</view>
+					<!-- 搜索按钮 -->
+					<view class="nav-inner-search-btn" :style="{ height: '22px' }">
+						<text class="nav-inner-search-text">搜索</text>
 					</view>
 				</view>
 			</view>
 		</view>
 
-		<!-- 导航栏占位符 - 确保内容正确布局 -->
-		<view class="navbar-placeholder" :style="{ height: (statusBarHeight + 100) + 'px' }"></view>
+		<!-- 导航栏占位符 - 移除，改为使用 margin-top -->
+		<!-- <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view> -->
 		
 		<!-- 主内容区 -->
 		<scroll-view 
@@ -53,7 +47,7 @@
 			@scroll="handleScroll"
 		>
 			<!-- 智能健康卡片 -->
-			<view class="smart-health-card">
+			<view class="smart-health-card" :style="{ marginTop: (statusBarHeight + 44 + 10) + 'px' }">
 				<view class="health-content">
 					<view class="health-header">
 						<text class="health-title">智能健康助手</text>
@@ -239,7 +233,7 @@
 						v-for="item in familyItems" 
 						:key="item.id"
 						class="family-item"
-						@click="navigateToCategory(item.categoryId)"
+						@click="navigateToCategory(item)"
 					>
 						<view class="family-icon" :style="{ backgroundColor: item.color }">
 							<text>{{ item.icon }}</text>
@@ -250,85 +244,7 @@
 				</view>
 			</view>
 
-			<!-- 智能推荐 -->
-			<view class="smart-recommend">
-				<view class="section-header">
-					<view class="title-section">
-						<text class="section-icon">✨</text>
-						<text class="section-title">智能推荐</text>
-					</view>
-					<view class="recommend-filters">
-						<text 
-							v-for="filter in recommendFilters" 
-							:key="filter.id"
-							:class="['filter-item', { active: activeFilter === filter.id }]"
-							@click="switchFilter(filter.id)"
-						>
-							{{ filter.name }}
-						</text>
-					</view>
-				</view>
-				
-				<view class="recommend-grid">
-					<view 
-						v-for="product in recommendedProducts" 
-						:key="product.id"
-						class="recommend-product"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-image-container">
-							<image 
-								class="product-image" 
-								:src="product.image" 
-								mode="aspectFill"
-							/>
-							<view class="product-tags">
-								<text v-if="product.tag" class="product-tag">{{ product.tag }}</text>
-								<text v-if="product.featured" class="featured-tag">{{ product.featured }}</text>
-							</view>
-						</view>
-						
-						<view class="product-details">
-							<text class="product-title">{{ product.name }}</text>
-							<text class="product-specification">{{ product.specification }}</text>
-							
-							<view class="product-rating">
-								<view class="rating-stars">
-									<text class="star-icon">⭐</text>
-									<text class="rating-value">{{ product.rating }}</text>
-								</view>
-								<text class="reviews-count">{{ product.reviews }}条评价</text>
-							</view>
-							
-							<view class="price-section">
-								<view class="current-price">
-									<text class="price-symbol">¥</text>
-									<text class="price-value">{{ product.price }}</text>
-								</view>
-								<text class="original-price" v-if="product.originalPrice > product.price">
-									¥{{ product.originalPrice }}
-								</text>
-							</view>
-							
-							<view class="product-actions">
-								<view class="add-to-cart" @click.stop="addToCart(product)">
-									<text class="cart-icon">🛒</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				
-				<!-- 加载状态 -->
-				<view v-if="loading" class="loading-state">
-					<view class="loading-spinner"></view>
-					<text class="loading-text">加载中...</text>
-				</view>
-				
-				<view v-if="!hasMore && recommendedProducts.length > 0" class="no-more">
-					<text class="no-more-text">--- 已加载全部内容 ---</text>
-				</view>
-			</view>
+			<!-- 智能推荐模块已隐藏 -->
 
 			<!-- 健康提醒 -->
 			<view class="health-reminder">
@@ -352,6 +268,9 @@
 
 <script setup lang="uts">
 import { ref, reactive, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Product, Category } from '@/utils/supabaseService.uts'
 
 // 响应式数据
 const statusBarHeight = ref(0)
@@ -363,6 +282,10 @@ const activeSort = ref('sales')
 const activeFilter = ref('recommend')
 const currentPage = ref(1)
 
+// 数据源
+const hotProducts = ref<Product[]>([])
+const recommendedProducts = ref<Product[]>([])
+
 // 屏幕尺寸检测
 const isMobile = ref(false)
 
@@ -372,35 +295,18 @@ const lastScrollTop = ref(0)
 const scrollThreshold = 30 // 降低滚动阈值，使其更灵敏
 const scrollingUp = ref(false)
 
-// 分类数据
-const categories = [
-	{ id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
-	{ id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
-	{ id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
-	{ id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
-	{ id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
-	{ id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
-	{ id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
-	{ id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
-	{ id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
-	{ id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
-]
+// 分类数据 - 从Supabase获取
+const categories = ref<Category[]>([])
 
 // 排序标签
 const sortTabs = [
+	{ id: 'recommend', name: '智能推荐' },
 	{ id: 'sales', name: '销量' },
 	{ id: 'price', name: '价格' },
 	{ id: 'new', name: '新品' },
-	{ id: 'recommend', name: '推荐' }
+	{ id: 'discount', name: '特价' }
 ]
 
-// 推荐筛选器
-const recommendFilters = [
-	{ id: 'recommend', name: '智能推荐' },
-	{ id: 'hot', name: '热门商品' },
-	{ id: 'discount', name: '限时优惠' },
-	{ id: 'quality', name: '品质优选' }
-]
 
 // 健康资讯
 const healthNews = [
@@ -424,53 +330,89 @@ const healthNews = [
 	}
 ]
 
-// 热销药品
-const hotProducts = [
-	{
-		id: 'hot1',
-		name: '布洛芬缓释胶囊',
-		specification: '0.3g*24粒',
-		price: 18.5,
-		originalPrice: 25.8,
-		image: 'https://picsum.photos/300/300?random=medicine1',
-		manufacturer: '修正药业',
-		sales: 2560,
-		badge: '热销'
-	},
-	{
-		id: 'hot2',
-		name: '板蓝根颗粒',
-		specification: '10g*20袋',
-		price: 22.8,
-		originalPrice: 29.9,
-		image: 'https://picsum.photos/300/300?random=medicine2',
-		manufacturer: '白云山',
-		sales: 1890,
-		badge: '推荐'
-	},
-	{
-		id: 'hot3',
-		name: '维生素C片',
-		specification: '100mg*100片',
-		price: 15.9,
-		originalPrice: 19.9,
-		image: 'https://picsum.photos/300/300?random=medicine3',
-		manufacturer: '养生堂',
-		sales: 1420,
-		badge: '特价'
-	},
-	{
-		id: 'hot4',
-		name: '胃康灵胶囊',
-		specification: '0.4g*24粒',
-		price: 32.8,
-		originalPrice: 38.5,
-		image: 'https://picsum.photos/300/300?random=medicine4',
-		manufacturer: '三九医药',
-		sales: 890,
-		badge: '新品'
-	}
-]
+// 获取分类数据
+const loadCategories = async () => {
+  try {
+    const categoriesData = await supabaseService.getCategories()
+    // 映射字段：将description映射为desc，保持与原有结构兼容
+    categories.value = categoriesData.map((cat: any) => ({
+      id: cat.id,
+      name: cat.name,
+      icon: cat.icon || '📦',
+      desc: cat.description || cat.desc || '',
+      color: cat.color || '#4CAF50'
+    }))
+  } catch (error) {
+    console.error('加载分类数据失败:', error)
+    // 如果加载失败，使用默认分类作为后备
+    categories.value = [
+      { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
+      { id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
+      { id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
+      { id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
+      { id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' }
+    ]
+  }
+}
+
+  // 获取热销商品（根据当前排序方式）
+const loadHotProducts = async () => {
+  try {
+    let products: Product[] = []
+    const limit = 6
+    
+    console.log('加载热销商品，当前排序方式:', activeSort.value)
+    
+    switch (activeSort.value) {
+      case 'sales':
+        console.log('调用 getHotProducts')
+        products = await supabaseService.getHotProducts(limit)
+        break
+      case 'price':
+        console.log('调用 getProductsByPrice')
+        // 按价格升序（从低到高）
+        products = await supabaseService.getProductsByPrice(limit, true)
+        break
+      case 'new':
+        console.log('调用 getProductsByNewest')
+        // 按创建时间，最新的在前
+        products = await supabaseService.getProductsByNewest(limit)
+        break
+      case 'recommend':
+        console.log('调用 getRecommendedProducts')
+        // 推荐商品（带badge的商品）
+        products = await supabaseService.getRecommendedProducts(limit)
+        break
+      case 'discount':
+        console.log('调用 getDiscountProducts')
+        // 特价商品（badge为'特价'）
+        products = await supabaseService.getDiscountProducts(limit)
+        break
+      default:
+        console.log('调用默认 getHotProducts')
+        products = await supabaseService.getHotProducts(limit)
+    }
+    
+    console.log('加载到的商品数量:', products.length)
+    hotProducts.value = products
+  } catch (error) {
+    console.error('加载热销商品失败:', error)
+    hotProducts.value = []
+  }
+}
+
+// 获取推荐商品
+const loadRecommendedProducts = async (limit: number = 6) => {
+  recommendedProducts.value = await supabaseService.getRecommendedProducts(limit)
+}
+
+// 初始化数据
+const initData = async () => {
+	await loadCategories()
+	await loadHotProducts()
+	await loadRecommendedProducts()
+}
+
 
 // 家庭常备药
 const familyItems = [
@@ -524,61 +466,10 @@ const familyItems = [
 	}
 ]
 
-// 推荐商品
-const recommendedProducts = [
-	{
-		id: 'rec1',
-		name: '阿莫西林胶囊',
-		specification: '0.25g*24粒',
-		price: 28.5,
-		originalPrice: 35.0,
-		image: 'https://picsum.photos/350/350?random=rec1',
-		rating: 4.8,
-		reviews: 156,
-		tag: '处方药',
-		featured: '医生推荐'
-	},
-	{
-		id: 'rec2',
-		name: '连花清瘟胶囊',
-		specification: '0.35g*36粒',
-		price: 42.8,
-		originalPrice: 48.0,
-		image: 'https://picsum.photos/350/350?random=rec2',
-		rating: 4.9,
-		reviews: 289,
-		tag: '中成药',
-		featured: '热销爆款'
-	},
-	{
-		id: 'rec3',
-		name: '盐酸氨溴索口服液',
-		specification: '100ml',
-		price: 35.9,
-		originalPrice: 42.0,
-		image: 'https://picsum.photos/350/350?random=rec3',
-		rating: 4.7,
-		reviews: 132,
-		tag: '止咳化痰',
-		featured: '家庭必备'
-	},
-	{
-		id: 'rec4',
-		name: '氯雷他定片',
-		specification: '10mg*6片',
-		price: 18.6,
-		originalPrice: 22.0,
-		image: 'https://picsum.photos/350/350?random=rec4',
-		rating: 4.6,
-		reviews: 98,
-		tag: '抗过敏',
-		featured: '季节必备'
-	}
-]
-
 // 生命周期
-onMounted(() => {
+onMounted(async () => {
 	initPage()
+	await initData()
 })
 
 // 页面显示时重置状态
@@ -693,13 +584,15 @@ const switchCategory = (category: any) => {
 // 切换排序
 const switchSort = (sortId: string) => {
 	activeSort.value = sortId
-	// 这里可以添加排序逻辑
+	// 重新加载热销商品，排序由 Supabase 服务处理
+	loadHotProducts()
 }
 
 // 切换筛选器
 const switchFilter = (filterId: string) => {
 	activeFilter.value = filterId
-	// 这里可以添加筛选逻辑
+	// 重新加载推荐商品，筛选由 Supabase 服务处理
+	loadRecommendedProducts()
 }
 
 // 查看新闻详情
@@ -722,31 +615,72 @@ const onRefresh = () => {
 }
 
 // 加载更多
-const loadMore = () => {
+const loadMore = async () => {
 	if (loading.value || !hasMore.value) return
 	
 	loading.value = true
-	setTimeout(() => {
-		// 模拟加载更多数据
-		const newProducts = [...recommendedProducts].map((item, index) => ({
-			...item,
-			id: `new${index}`,
-			price: Math.floor(item.price * 0.9 + Math.random() * 10)
-		}))
+	try {
+		// 增加限制以加载更多推荐商品
+		const currentLimit = recommendedProducts.value.length + 6
+		await loadRecommendedProducts(currentLimit)
 		
-		// 实际项目中应该合并数据
-		loading.value = false
-		hasMore.value = recommendedProducts.length < 20
+		// 假设如果返回的商品数量小于请求的限制，则没有更多数据
+		if (recommendedProducts.value.length < currentLimit) {
+			hasMore.value = false
+		}
 		
 		uni.showToast({
 			title: '加载完成',
 			icon: 'success'
 		})
-	}, 2000)
+	} catch (error) {
+		console.error('加载更多失败:', error)
+		uni.showToast({
+			title: '加载失败',
+			icon: 'none'
+		})
+	} finally {
+		loading.value = false
+	}
 }
 
 // 添加到购物车
 const addToCart = (product: any) => {
+	// 获取现有购物车数据
+	const cartData = uni.getStorageSync('cart')
+	let cartItems: any[] = []
+	
+	if (cartData) {
+		try {
+			cartItems = JSON.parse(cartData as string) as any[]
+		} catch (e) {
+			console.error('解析购物车数据失败', e)
+		}
+	}
+	
+	// 检查商品是否已存在
+	const existingItem = cartItems.find((item: any) => item.id === product.id)
+	
+	if (existingItem) {
+		existingItem.quantity++
+	} else {
+		// 添加新商品
+		cartItems.push({
+			id: product.id,
+			shopId: product.shopId || 'shop_default',
+			shopName: product.shopName || product.manufacturer || '自营店铺',
+			name: product.name,
+			price: product.price,
+			image: product.image,
+			spec: product.specification || '默认规格',
+			quantity: 1,
+			selected: true
+		})
+	}
+	
+	// 保存回存储
+	uni.setStorageSync('cart', JSON.stringify(cartItems))
+	
 	uni.showToast({
 		title: '已添加到购物车',
 		icon: 'success'
@@ -757,13 +691,25 @@ const addToCart = (product: any) => {
 const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
 const navigateToNews = () => uni.navigateTo({ url: '/pages/news/list' })
 const navigateToProduct = (product: any) => {
-	uni.navigateTo({
-		url: `/pages/medicine/detail?id=${product.id}`
+	// 使用productId（如果存在）作为跳转的商品ID，否则使用id
+	const productId = product.productId || product.id
+	// 传递完整的参数，确保商品详情页能正确加载
+    // 移除 URLSearchParams 内部的 encodeURIComponent，因为 append 会自动编码
+    // 或者直接构建 URL 字符串以确保兼容性
+	
+    const name = product.name || ''
+    const image = product.image || '/static/product1.jpg'
+    const price = product.price?.toString() || '0'
+    const originalPrice = (product.original_price || product.originalPrice || (product.price * 1.2).toFixed(2))?.toString()
+    
+    // 手动构建URL，避免双重编码问题
+	uni.navigateTo({ 
+		url: `/pages/mall/consumer/product-detail?id=${productId}&productId=${productId}&price=${price}&originalPrice=${originalPrice}&name=${encodeURIComponent(name)}&image=${encodeURIComponent(image)}` 
 	})
 }
-const navigateToCategory = (categoryId: string) => {
+const navigateToCategory = (item: any) => {
 	uni.navigateTo({
-		url: `/pages/medicine/category?id=${categoryId}`
+		url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(item.name)}&type=family`
 	})
 }
 const navigateToConsultation = () => uni.navigateTo({ url: '/pages/medicine/consultation' })
@@ -799,7 +745,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	right: 0;
 	background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
 	z-index: 1000;
-	box-shadow: 0 2px 20px rgba(76, 175, 80, 0.15);
+	box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15); /* 调整为与分类页一致 */
 	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 	will-change: transform, opacity;
 	pointer-events: auto; /* 确保导航栏可以交互 */
@@ -807,10 +753,12 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	-webkit-backface-visibility: hidden;
 }
 
-.nav-container {
-	height: 100px; /* 增加导航栏高度 */
+/* 导航栏搜索框容器内边距调整 */
+.search-container {
+	height: 44px; /* 调整为与消息页一致的高度 */
 	padding: 0 16px;
 	display: flex;
+	flex-direction: row; /* 显式设置 flex-direction: row */
 	align-items: center;
 	justify-content: space-between;
 	max-width: 1400px;
@@ -818,104 +766,66 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	width: 100%;
 }
 
-/* 品牌区域 - 重新设计为自适应平铺 */
-.brand-section {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	gap: 20px;
-	flex-wrap: wrap;
-	justify-content: space-between;
+/* 搜索框 hover 效果 */
+.search-box:hover {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* 品牌标识区域 - 自适应平铺 */
-.brand-logo-area {
-	flex-shrink: 1;
-	min-width: 120px;
-	max-width: 200px;
-	display: flex;
-	align-items: center;
-	flex-grow: 0;
-}
-
-/* 小屏幕隐藏品牌标识 */
-.brand-logo-area.hidden-on-mobile {
-	display: none;
-}
-
-/* 小屏幕隐藏搜索工具 */
-.nav-search-tools.hidden-on-mobile {
-	display: none;
-}
-
-.brand-info {
-	display: flex;
-	flex-direction: column;
-}
-
-.brand-name {
-	font-size: 18px;
-	font-weight: bold;
-	color: white;
-	letter-spacing: 0.5px;
-}
-
-.brand-tag {
-	font-size: 11px;
-	color: rgba(255, 255, 255, 0.9);
-	margin-top: 2px;
-}
-
-/* 导航栏搜索框容器 - 自适应平铺 */
-.nav-search-container {
+/* 导航栏搜索框容器内边距调整 */
+.search-box {
 	flex: 1;
-	min-width: 0; /* 允许缩小 */
-	max-width: 100%; /* 确保在小屏幕上不会溢出 */
-	flex-grow: 1;
-}
-
-.nav-search {
-	width: 100%;
-}
-
-.nav-search-box {
-	background: rgba(255, 255, 255, 0.95);
-	border-radius: 25px;
-	padding: 12px 20px;
+	max-width: 600px;
+	background: #f0f0f0;
+	border-radius: 20px;
+	padding: 0 4px 0 12px;
 	display: flex;
+	flex-direction: row; /* UVUE 显式设置 row */
 	align-items: center;
 	cursor: pointer;
 	transition: all 0.3s ease;
-	border: 2px solid transparent;
 	width: 100%;
+	height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
 }
 
-.nav-search-box:hover {
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-	border-color: rgba(255, 255, 255, 0.3);
-}
-
-.nav-search-icon {
-	font-size: 18px;
-	color: #4CAF50;
-	margin-right: 12px;
-	flex-shrink: 0;
-}
-
-.nav-search-tools {
-	display: flex;
-	gap: 8px;
-	margin-left: 12px;
-	flex-shrink: 0;
-}
-
-.nav-tool-item {
-	font-size: 12px;
-	color: #4CAF50;
-	padding: 4px 10px;
-	background: rgba(76, 175, 80, 0.1);
-	border-radius: 12px;
+.search-placeholder {
+	font-size: 14px;
+	color: #999;
+	flex: 1;
 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.nav-icon-btn {
+	padding: 4px 8px 4px 4px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	border-right: 1px solid #ddd;
+	margin-right: 8px;
+}
+
+.nav-icon {
+	font-size: 18px;
+}
+
+/* 搜索按钮高度微调 */
+.nav-inner-search-btn {
+	padding: 0 12px; /* 减小内边距 */
+	background-color: #87CEEB; /* 天空蓝 */
+	border-radius: 16px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	height: 24px; /* 随搜索框高度减小而减小 */
+}
+
+.nav-inner-search-text {
+	font-size: 12px; /* 字体稍微变小 */
+	color: #ffffff;
+	font-weight: 500;
 }
 
 /* 导航栏占位符 */
@@ -924,10 +834,27 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	flex-shrink: 0;
 }
 
+.nav-camera-btn {
+	padding: 4px 8px 4px 4px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	border-right-width: 1px;
+	border-right-style: solid;
+	border-right-color: #ddd;
+	border-right: 1px solid #ddd; /* 修复UVUE样式 */
+	margin-right: 8px;
+}
+
+.nav-camera-icon {
+	font-size: 20px;
+}
+
 /* 主内容区域 */
 .main-scroll {
 	flex: 1;
-	padding: 16px;
+	padding: 0 16px 16px;
 	max-width: 1400px;
 	margin-left: auto;
 	margin-right: auto;
@@ -942,6 +869,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	border-radius: 16px;
 	padding: 20px;
 	margin-bottom: 20px;
+	/* margin-top 由 style 动态控制 */
 	color: white;
 }
 
@@ -1205,10 +1133,19 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 }
 
+.section-header {
+	display: flex;
+	flex-direction: column; /* 标题和筛选器垂直排列 */
+	align-items: flex-start;
+	margin-bottom: 20px;
+	width: 100%;
+}
+
 .title-section {
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	width: 100%;
 }
 
 .section-icon {
@@ -1218,23 +1155,30 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 .sort-tabs {
 	display: flex;
-	gap: 12px;
+	flex-direction: row; /* UVUE 显式设置 row */
+	gap: 8px;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: wrap; /* 允许换行，实现自适应 */
 	justify-content: flex-start;
+	width: 100%;
+	margin-top: 12px;
 }
 
 .sort-tab {
 	font-size: 13px;
 	color: #666;
-	padding: 6px 16px;
+	padding: 8px 12px; /* 增加左右内边距 */
 	border-radius: 20px;
 	border: 1px solid #e0e0e0;
 	cursor: pointer;
 	transition: all 0.2s ease;
 	white-space: nowrap;
-	flex-shrink: 0;
-	flex-grow: 0;
+	flex: 1; /* 均分宽度 */
+	min-width: 70px; /* 设置最小宽度防止过窄 */
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .sort-tab.active {
@@ -1467,23 +1411,30 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 .recommend-filters {
 	display: flex;
-	gap: 12px;
+	flex-direction: row; /* UVUE 显式设置 row */
+	gap: 8px;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: wrap; /* 允许换行，实现自适应 */
 	justify-content: flex-start;
+	width: 100%;
+	margin-top: 12px;
 }
 
 .filter-item {
 	font-size: 13px;
 	color: #666;
-	padding: 6px 16px;
+	padding: 8px 12px; /* 增加左右内边距 */
 	border-radius: 20px;
 	border: 1px solid #e0e0e0;
 	cursor: pointer;
 	transition: all 0.2s ease;
 	white-space: nowrap;
-	flex-shrink: 0;
-	flex-grow: 0;
+	flex: 1; /* 均分宽度 */
+	min-width: 80px; /* 设置最小宽度防止过窄 */
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .filter-item.active {
@@ -1737,77 +1688,196 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 /* 小屏手机 (小于414px) */
 @media screen and (max-width: 414px) {
-	.nav-container {
+	.search-container {
 		padding: 0 12px;
-		height: 90px;
+		height: 44px; /* 恢复为44px，与PC和分类页逻辑保持一致 */
 	}
 	
-	.brand-section {
-		flex-direction: column;
-		align-items: stretch;
-		gap: 12px;
-		justify-content: flex-start;
-	}
-	
-	.brand-logo-area {
-		min-width: auto;
+	.search-box {
+		padding: 8px 16px; /* 与分类页保持一致 */
 		max-width: 100%;
-		flex-shrink: 0;
-		width: 100%;
-		justify-content: center;
-	}
-	
-	.brand-info {
-		align-items: center;
-		text-align: center;
-	}
-	
-	.brand-name {
-		font-size: 16px;
-	}
-	
-	.brand-tag {
-		font-size: 10px;
-	}
-	
-	.nav-search-container {
-		flex: 1;
-		width: 100%;
-		flex-grow: 1;
-	}
-	
-	.nav-search-box {
-		padding: 10px 16px;
-	}
-	
-	.nav-search-tools {
-		display: none;
+		margin: 0;
 	}
 	
 	.main-scroll {
-		padding: 12px;
+		padding: 0 12px 12px;
 	}
 	
 	.category-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 12px;
+		grid-template-columns: repeat(5, 1fr); /* 调整为一行5个，正好两行 */
+		gap: 8px;
+		padding: 0 4px;
+	}
+	
+	.category-card {
+		padding: 8px 0;
+		background: transparent; /* 移除卡片背景 */
+		box-shadow: none; /* 移除阴影 */
+		border: none; /* 移除边框 */
+	}
+	
+	.category-card:hover {
+		transform: none; /* 移动端移除悬停效果 */
+		box-shadow: none;
+	}
+	
+	.card-icon {
+		width: 44px; /* 减小图标尺寸 */
+		height: 44px;
+		border-radius: 22px;
+		margin-bottom: 6px;
+	}
+	
+	.card-icon text {
+		font-size: 20px;
+	}
+	
+	.card-name {
+		font-size: 11px; /* 减小文字大小 */
+		font-weight: normal;
+		color: #333;
+	}
+	
+	.card-desc {
+		display: none; /* 手机端隐藏描述文字，保持界面整洁 */
 	}
 	
 	.services-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 16px;
+		grid-template-columns: repeat(4, 1fr); /* 服务入口也调整为一行4个 */
+		gap: 8px;
 	}
 	
-	.products-grid {
-		grid-template-columns: 1fr;
+	.service-card {
+		padding: 10px 4px;
+		background: #f8f9fa; /* 保持淡色背景 */
 	}
 	
+	.service-icon {
+		width: 40px;
+		height: 40px;
+		border-radius: 20px;
+		margin-bottom: 8px;
+	}
+	
+	.service-icon text {
+		font-size: 20px;
+	}
+	
+	.service-name {
+		font-size: 11px;
+	}
+	
+	.service-desc {
+		display: none; /* 隐藏描述 */
+	}
+	
+	.products-grid,
 	.recommend-grid {
-		grid-template-columns: 1fr;
+		grid-template-columns: repeat(2, 1fr); /* 手机端调整为双列显示 */
+		gap: 8px; /* 减小间距 */
+	}
+
+	.product-info,
+	.product-details {
+		padding: 8px; /* 减小内边距 */
+	}
+
+	.product-name,
+	.product-title {
+		font-size: 13px; /* 调整字体大小 */
+		height: 36px; /* 限制高度，防止参差不齐 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.product-image,
+	.product-image-container {
+		height: 140px; /* 稍微减小图片高度适配双列 */
+	}
+
+	/* 手机端商品卡片极简模式（热销 & 推荐） */
+	.hot-products .product-spec,
+	.hot-products .manufacturer,
+	.hot-products .original-price,
+	.hot-products .cart-text,
+	.hot-products .sales-info,
+	.hot-products .product-action, /* 隐藏热销区加购按钮 */
+	.smart-recommend .product-specification,
+	.smart-recommend .product-rating,
+	.smart-recommend .original-price,
+	.smart-recommend .product-actions /* 隐藏推荐区加购按钮 */
+	{
+		display: none;
+	}
+	
+	.hot-products .product-info,
+	.smart-recommend .product-details {
+		padding: 6px; /* 极小内边距 */
+	}
+	
+	.hot-products .product-image,
+	.hot-products .product-image-container,
+	.smart-recommend .product-image,
+	.smart-recommend .product-image-container {
+		height: 110px; /* 进一步减小图片高度 */
+	}
+	
+	.hot-products .product-name,
+	.smart-recommend .product-title {
+		margin-bottom: 2px;
+		font-size: 12px;
+		line-height: 1.3;
+		height: 32px; /* 限制2行高度 */
+	}
+	
+	.hot-products .price-section,
+	.smart-recommend .price-section {
+		margin-bottom: 0;
+		margin-top: 4px;
+	}
+	
+	.hot-products .price-symbol,
+	.smart-recommend .price-symbol {
+		font-size: 10px;
+		color: #FF5722;
+	}
+	
+	.hot-products .price-value,
+	.smart-recommend .price-value {
+		font-size: 14px; /* 字体变小 */
+		font-weight: 600;
 	}
 	
 	.family-grid {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(4, 1fr); /* 家庭常备药也调整为一行4个 */
+		gap: 8px;
+	}
+	
+	.family-item {
+		padding: 8px 4px;
+		background: #f8f9fa;
+	}
+	
+	.family-icon {
+		width: 36px;
+		height: 36px;
+		border-radius: 18px;
+		margin-bottom: 6px;
+	}
+	
+	.family-icon text {
+		font-size: 18px;
+	}
+	
+	.family-name {
+		font-size: 11px;
+	}
+	
+	.family-desc {
+		display: none;
 	}
 	
 	.news-swiper {
@@ -1817,16 +1887,19 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	.sort-tabs,
 	.recommend-filters {
 		gap: 8px;
-		justify-content: center;
+		justify-content: flex-start; /* 保持左对齐 */
+		overflow-x: auto; /* 允许横向滚动 */
+		flex-wrap: nowrap; /* 禁止换行 */
+		padding-bottom: 4px; /* 滚动条空间 */
 	}
 	
 	.sort-tab,
 	.filter-item {
 		padding: 5px 12px;
 		font-size: 12px;
-		flex-grow: 1;
-		text-align: center;
-		min-width: 60px;
+		flex-shrink: 0; /* 防止被压缩 */
+		min-width: auto;
+		flex: 0 0 auto; /* 取消均分 */
 	}
 	
 	.section-header {
@@ -1847,38 +1920,9 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 /* 中屏手机/小平板 (415px-768px) */
 @media screen and (min-width: 415px) and (max-width: 768px) {
-	.nav-container {
+	.search-container {
 		padding: 0 16px;
-		height: 95px;
-	}
-	
-	.brand-section {
-		flex-direction: row;
-		align-items: center;
-		gap: 15px;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-	}
-	
-	.brand-logo-area {
-		min-width: 140px;
-		max-width: 160px;
-		flex-shrink: 1;
-		flex-grow: 0;
-	}
-	
-	.brand-name {
-		font-size: 17px;
-	}
-	
-	.nav-search-container {
-		flex: 1;
-		min-width: 0;
-		flex-grow: 1;
-	}
-	
-	.nav-search-tools {
-		display: none;
+		height: 44px;
 	}
 	
 	.main-scroll {
@@ -1938,10 +1982,10 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 /* 平板设备 (769px-1024px) */
 @media screen and (min-width: 769px) and (max-width: 1024px) {
-	.nav-container {
+	.search-container {
 		padding: 0 24px;
 		max-width: 100%;
-		height: 100px;
+		height: 44px;
 	}
 	
 	.nav-search-tools .nav-tool-item {
@@ -1950,7 +1994,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	
 	.main-scroll {
 		max-width: 100%;
-		padding: 20px 24px;
+		padding: 0 24px 20px;
 	}
 	
 	.category-grid {
@@ -1980,17 +2024,18 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 
 /* 桌面端 (1025px以上) */
 @media screen and (min-width: 1025px) {
-	.nav-container {
+	.search-container {
 		padding: 0 32px;
-		height: 100px;
+		height: 44px;
 	}
 	
 	.main-scroll {
-		padding: 24px 32px;
+		max-width: 100%;
+		padding: 0 32px 24px;
 	}
 	
 	.category-grid {
-		grid-template-columns: repeat(5, 1fr);
+		grid-template-columns: repeat(6, 1fr);
 	}
 	
 	.services-grid {
diff --git a/pages/mall/consumer/index - 副本.uvue b/pages/mall/consumer/index - 副本.uvue
deleted file mode 100644
index 93d69e90..00000000
--- a/pages/mall/consumer/index - 副本.uvue	
+++ /dev/null
@@ -1,1923 +0,0 @@
-<!-- pages/mall/consumer/index.uvue -->
-<template>
-	<view class="medic-home">
-		<!-- 智能顶部导航栏 -->
-		<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-			<view class="nav-container">
-				<!-- 品牌标识区域 -->
-				<view class="brand-section">
-					<view class="brand-info">
-						<text class="brand-name">康乐医药商城</text>
-						<text class="brand-tag">官方认证·正品保障</text>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 主内容区 -->
-		<scroll-view 
-			scroll-y 
-			class="main-scroll"
-			:style="{ height: scrollHeight + 'px' }"
-			refresher-enabled
-			:refresher-triggered="refreshing"
-			@refresherrefresh="onRefresh"
-			@scrolltolower="loadMore"
-		>
-			<!-- 智能健康卡片 -->
-			<view class="smart-health-card">
-				<view class="health-content">
-					<view class="health-header">
-						<text class="health-title">智能健康助手</text>
-						<text class="health-subtitle">根据您的健康数据推荐</text>
-					</view>
-					<view class="health-tips">
-						<text class="tip-item">💡 按时用药提醒</text>
-						<text class="tip-item">📋 健康记录跟踪</text>
-						<text class="tip-item">🩺 在线问诊咨询</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 智能分类网格 - 完全响应式 -->
-			<view class="smart-categories">
-				<view class="section-header">
-					<text class="section-title">智能分类</text>
-					<text class="section-desc">快速定位所需药品</text>
-				</view>
-				<view class="category-grid">
-					<view 
-						v-for="category in categories" 
-						:key="category.id"
-						class="category-card"
-						@click="switchCategory(category)"
-						:style="{ '--card-color': category.color }"
-					>
-						<view class="card-icon">
-							<text>{{ category.icon }}</text>
-						</view>
-						<text class="card-name">{{ category.name }}</text>
-						<text class="card-desc">{{ category.desc }}</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 智能搜索入口 -->
-			<view class="smart-search" @click="navigateToSearch">
-				<view class="search-input">
-					<text class="search-icon">🔍</text>
-					<text class="search-placeholder">症状/药品/品牌智能搜索</text>
-					<view class="search-tools">
-						<text class="tool-item">语音</text>
-						<text class="tool-item">拍照</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 健康资讯轮播 -->
-			<view class="health-news">
-				<view class="news-header">
-					<text class="news-title">健康资讯</text>
-					<text class="news-more" @click="navigateToNews">更多 ></text>
-				</view>
-				<swiper 
-					class="news-swiper"
-					:autoplay="true"
-					:interval="4000"
-					:duration="500"
-					:circular="true"
-					:indicator-dots="true"
-					indicator-color="rgba(255,255,255,0.3)"
-					indicator-active-color="#4CAF50"
-				>
-					<swiper-item 
-						v-for="news in healthNews" 
-						:key="news.id"
-						class="news-item"
-					>
-						<view class="news-content" @click="viewNewsDetail(news)">
-							<image 
-								class="news-image" 
-								:src="news.image" 
-								mode="aspectFill"
-							/>
-							<view class="news-overlay">
-								<text class="news-tag">{{ news.tag }}</text>
-								<text class="news-caption">{{ news.title }}</text>
-							</view>
-						</view>
-					</swiper-item>
-				</swiper>
-			</view>
-
-			<!-- 智能服务入口 -->
-			<view class="smart-services">
-				<view class="services-grid">
-					<view class="service-card" @click="navigateToConsultation">
-						<view class="service-icon" style="background: #2196F3;">
-							<text>👨‍⚕️</text>
-						</view>
-						<text class="service-name">在线问诊</text>
-						<text class="service-desc">三甲医生在线</text>
-					</view>
-					<view class="service-card" @click="navigateToPrescription">
-						<view class="service-icon" style="background: #4CAF50;">
-							<text>📋</text>
-						</view>
-						<text class="service-name">电子处方</text>
-						<text class="service-desc">医生开方购药</text>
-					</view>
-					<view class="service-card" @click="navigateToOTC">
-						<view class="service-icon" style="background: #FF9800;">
-							<text>💊</text>
-						</view>
-						<text class="service-name">非处方药</text>
-						<text class="service-desc">安全自主选购</text>
-					</view>
-					<view class="service-card" @click="navigateToHealthTools">
-						<view class="service-icon" style="background: #9C27B0;">
-							<text>🩺</text>
-						</view>
-						<text class="service-name">健康工具</text>
-						<text class="service-desc">健康管理助手</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 热销药品专区 -->
-			<view class="hot-products">
-				<view class="section-header">
-					<view class="title-section">
-						<text class="section-icon">🔥</text>
-						<text class="section-title">热销药品</text>
-					</view>
-					<view class="sort-tabs">
-						<text 
-							v-for="tab in sortTabs" 
-							:key="tab.id"
-							:class="['sort-tab', { active: activeSort === tab.id }]"
-							@click="switchSort(tab.id)"
-						>
-							{{ tab.name }}
-						</text>
-					</view>
-				</view>
-				
-				<view class="products-grid">
-					<view 
-						v-for="product in hotProducts" 
-						:key="product.id"
-						class="product-card"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-badge" v-if="product.badge">{{ product.badge }}</view>
-						<image 
-							class="product-image" 
-							:src="product.image" 
-							mode="aspectFill"
-						/>
-						<view class="product-info">
-							<text class="product-name">{{ product.name }}</text>
-							<text class="product-spec">{{ product.specification }}</text>
-							
-							<view class="price-section">
-								<view class="current-price">
-									<text class="price-symbol">¥</text>
-									<text class="price-value">{{ product.price }}</text>
-								</view>
-								<text class="original-price" v-if="product.originalPrice > product.price">
-									¥{{ product.originalPrice }}
-								</text>
-							</view>
-							
-							<view class="product-meta">
-								<text class="manufacturer">{{ product.manufacturer }}</text>
-								<view class="sales-info">
-									<text class="sales-count">已售{{ product.sales }}</text>
-								</view>
-							</view>
-							
-							<view class="product-action">
-								<view class="cart-btn" @click.stop="addToCart(product)">
-									<text class="cart-icon">+</text>
-									<text class="cart-text">加入购物车</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<!-- 家庭常备药 -->
-			<view class="family-medicine">
-				<view class="section-header">
-					<view class="title-section">
-						<text class="section-icon">🏠</text>
-						<text class="section-title">家庭常备药</text>
-					</view>
-					<text class="section-subtitle">守护全家健康</text>
-				</view>
-				
-				<view class="family-grid">
-					<view 
-						v-for="item in familyItems" 
-						:key="item.id"
-						class="family-item"
-						@click="navigateToCategory(item.categoryId)"
-					>
-						<view class="family-icon" :style="{ backgroundColor: item.color }">
-							<text>{{ item.icon }}</text>
-						</view>
-						<text class="family-name">{{ item.name }}</text>
-						<text class="family-desc">{{ item.desc }}</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 智能推荐 -->
-			<view class="smart-recommend">
-				<view class="section-header">
-					<view class="title-section">
-						<text class="section-icon">✨</text>
-						<text class="section-title">智能推荐</text>
-					</view>
-					<view class="recommend-filters">
-						<text 
-							v-for="filter in recommendFilters" 
-							:key="filter.id"
-							:class="['filter-item', { active: activeFilter === filter.id }]"
-							@click="switchFilter(filter.id)"
-						>
-							{{ filter.name }}
-						</text>
-					</view>
-				</view>
-				
-				<view class="recommend-grid">
-					<view 
-						v-for="product in recommendedProducts" 
-						:key="product.id"
-						class="recommend-product"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-image-container">
-							<image 
-								class="product-image" 
-								:src="product.image" 
-								mode="aspectFill"
-							/>
-							<view class="product-tags">
-								<text v-if="product.tag" class="product-tag">{{ product.tag }}</text>
-								<text v-if="product.featured" class="featured-tag">{{ product.featured }}</text>
-							</view>
-						</view>
-						
-						<view class="product-details">
-							<text class="product-title">{{ product.name }}</text>
-							<text class="product-specification">{{ product.specification }}</text>
-							
-							<view class="product-rating">
-								<view class="rating-stars">
-									<text class="star-icon">⭐</text>
-									<text class="rating-value">{{ product.rating }}</text>
-								</view>
-								<text class="reviews-count">{{ product.reviews }}条评价</text>
-							</view>
-							
-							<view class="price-section">
-								<view class="current-price">
-									<text class="price-symbol">¥</text>
-									<text class="price-value">{{ product.price }}</text>
-								</view>
-								<text class="original-price" v-if="product.originalPrice > product.price">
-									¥{{ product.originalPrice }}
-								</text>
-							</view>
-							
-							<view class="product-actions">
-								<view class="add-to-cart" @click.stop="addToCart(product)">
-									<text class="cart-icon">🛒</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				
-				<!-- 加载状态 -->
-				<view v-if="loading" class="loading-state">
-					<view class="loading-spinner"></view>
-					<text class="loading-text">加载中...</text>
-				</view>
-				
-				<view v-if="!hasMore && recommendedProducts.length > 0" class="no-more">
-					<text class="no-more-text">--- 已加载全部内容 ---</text>
-				</view>
-			</view>
-
-			<!-- 健康提醒 -->
-			<view class="health-reminder">
-				<view class="reminder-content">
-					<text class="reminder-icon">⏰</text>
-					<view class="reminder-text">
-						<text class="reminder-title">健康提醒</text>
-						<text class="reminder-desc">您有1个待用药提醒，点击查看详情</text>
-					</view>
-					<view class="reminder-action" @click="navigateToReminders">
-						<text class="action-text">查看</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 底部安全区域 -->
-			<view class="safe-area"></view>
-		</scroll-view>
-	</view>
-</template>
-
-<script setup lang="uts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-
-// 响应式数据
-const statusBarHeight = ref(0)
-const scrollHeight = ref(0)
-const refreshing = ref(false)
-const loading = ref(false)
-const hasMore = ref(true)
-const cartCount = ref(3)
-const activeSort = ref('sales')
-const activeFilter = ref('recommend')
-const currentPage = ref(1)
-
-// 用户信息
-const userInfo = reactive({
-	name: '张先生',
-	avatar: 'https://picsum.photos/100/100?random=avatar'
-})
-
-// 分类数据
-const categories = [
-	{ id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
-	{ id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
-	{ id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
-	{ id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
-	{ id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
-	{ id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
-	{ id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
-	{ id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
-	{ id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
-	{ id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
-]
-
-// 排序标签
-const sortTabs = [
-	{ id: 'sales', name: '销量' },
-	{ id: 'price', name: '价格' },
-	{ id: 'new', name: '新品' },
-	{ id: 'recommend', name: '推荐' }
-]
-
-// 推荐筛选器
-const recommendFilters = [
-	{ id: 'recommend', name: '智能推荐' },
-	{ id: 'hot', name: '热门商品' },
-	{ id: 'discount', name: '限时优惠' },
-	{ id: 'quality', name: '品质优选' }
-]
-
-// 健康资讯
-const healthNews = [
-	{
-		id: 'news1',
-		title: '秋季流感预防指南，科学防护健康过冬',
-		tag: '健康科普',
-		image: 'https://picsum.photos/800/400?random=health1'
-	},
-	{
-		id: 'news2',
-		title: '家庭常备药清单，为家人健康保驾护航',
-		tag: '家庭用药',
-		image: 'https://picsum.photos/800/400?random=health2'
-	},
-	{
-		id: 'news3',
-		title: '慢性病科学管理，提高生活质量',
-		tag: '健康管理',
-		image: 'https://picsum.photos/800/400?random=health3'
-	}
-]
-
-// 热销药品
-const hotProducts = [
-	{
-		id: 'hot1',
-		name: '布洛芬缓释胶囊',
-		specification: '0.3g*24粒',
-		price: 18.5,
-		originalPrice: 25.8,
-		image: 'https://picsum.photos/300/300?random=medicine1',
-		manufacturer: '修正药业',
-		sales: 2560,
-		badge: '热销'
-	},
-	{
-		id: 'hot2',
-		name: '板蓝根颗粒',
-		specification: '10g*20袋',
-		price: 22.8,
-		originalPrice: 29.9,
-		image: 'https://picsum.photos/300/300?random=medicine2',
-		manufacturer: '白云山',
-		sales: 1890,
-		badge: '推荐'
-	},
-	{
-		id: 'hot3',
-		name: '维生素C片',
-		specification: '100mg*100片',
-		price: 15.9,
-		originalPrice: 19.9,
-		image: 'https://picsum.photos/300/300?random=medicine3',
-		manufacturer: '养生堂',
-		sales: 1420,
-		badge: '特价'
-	},
-	{
-		id: 'hot4',
-		name: '胃康灵胶囊',
-		specification: '0.4g*24粒',
-		price: 32.8,
-		originalPrice: 38.5,
-		image: 'https://picsum.photos/300/300?random=medicine4',
-		manufacturer: '三九医药',
-		sales: 890,
-		badge: '新品'
-	}
-]
-
-// 家庭常备药
-const familyItems = [
-	{
-		id: 'family1',
-		name: '创可贴',
-		desc: '伤口护理',
-		icon: '🩹',
-		color: '#FF5722',
-		categoryId: 'external'
-	},
-	{
-		id: 'family2',
-		name: '体温计',
-		desc: '健康监测',
-		icon: '🌡️',
-		color: '#2196F3',
-		categoryId: 'device'
-	},
-	{
-		id: 'family3',
-		name: '消毒酒精',
-		desc: '环境消毒',
-		icon: '🧪',
-		color: '#4CAF50',
-		categoryId: 'external'
-	},
-	{
-		id: 'family4',
-		name: '口罩',
-		desc: '日常防护',
-		icon: '😷',
-		color: '#607D8B',
-		categoryId: 'device'
-	},
-	{
-		id: 'family5',
-		name: '退热贴',
-		desc: '物理降温',
-		icon: '🧊',
-		color: '#00BCD4',
-		categoryId: 'cold'
-	},
-	{
-		id: 'family6',
-		name: '棉签纱布',
-		desc: '伤口处理',
-		icon: '🩹',
-		color: '#FF9800',
-		categoryId: 'external'
-	}
-]
-
-// 推荐商品
-const recommendedProducts = [
-	{
-		id: 'rec1',
-		name: '阿莫西林胶囊',
-		specification: '0.25g*24粒',
-		price: 28.5,
-		originalPrice: 35.0,
-		image: 'https://picsum.photos/350/350?random=rec1',
-		rating: 4.8,
-		reviews: 156,
-		tag: '处方药',
-		featured: '医生推荐'
-	},
-	{
-		id: 'rec2',
-		name: '连花清瘟胶囊',
-		specification: '0.35g*36粒',
-		price: 42.8,
-		originalPrice: 48.0,
-		image: 'https://picsum.photos/350/350?random=rec2',
-		rating: 4.9,
-		reviews: 289,
-		tag: '中成药',
-		featured: '热销爆款'
-	},
-	{
-		id: 'rec3',
-		name: '盐酸氨溴索口服液',
-		specification: '100ml',
-		price: 35.9,
-		originalPrice: 42.0,
-		image: 'https://picsum.photos/350/350?random=rec3',
-		rating: 4.7,
-		reviews: 132,
-		tag: '止咳化痰',
-		featured: '家庭必备'
-	},
-	{
-		id: 'rec4',
-		name: '氯雷他定片',
-		specification: '10mg*6片',
-		price: 18.6,
-		originalPrice: 22.0,
-		image: 'https://picsum.photos/350/350?random=rec4',
-		rating: 4.6,
-		reviews: 98,
-		tag: '抗过敏',
-		featured: '季节必备'
-	}
-]
-
-// 生命周期
-onMounted(() => {
-	initPage()
-})
-
-onUnmounted(() => {
-	// 清理工作
-})
-
-// 初始化页面
-const initPage = () => {
-	const systemInfo = uni.getSystemInfoSync()
-	statusBarHeight.value = systemInfo.statusBarHeight || 0
-	
-	// 计算滚动区域高度
-	const windowHeight = systemInfo.windowHeight
-	const navbarHeight = 60
-	scrollHeight.value = windowHeight - statusBarHeight.value - navbarHeight
-}
-
-// 切换分类
-const switchCategory = (category: any) => {
-	uni.navigateTo({
-		url: `/pages/medicine/category?id=${category.id}&name=${category.name}`
-	})
-}
-
-// 切换排序
-const switchSort = (sortId: string) => {
-	activeSort.value = sortId
-	// 这里可以添加排序逻辑
-}
-
-// 切换筛选器
-const switchFilter = (filterId: string) => {
-	activeFilter.value = filterId
-	// 这里可以添加筛选逻辑
-}
-
-// 查看新闻详情
-const viewNewsDetail = (news: any) => {
-	uni.navigateTo({
-		url: `/pages/news/detail?id=${news.id}`
-	})
-}
-
-// 下拉刷新
-const onRefresh = () => {
-	refreshing.value = true
-	setTimeout(() => {
-		refreshing.value = false
-		uni.showToast({
-			title: '刷新成功',
-			icon: 'success'
-		})
-	}, 1500)
-}
-
-// 加载更多
-const loadMore = () => {
-	if (loading.value || !hasMore.value) return
-	
-	loading.value = true
-	setTimeout(() => {
-		// 模拟加载更多数据
-		const newProducts = [...recommendedProducts].map((item, index) => ({
-			...item,
-			id: `new${index}`,
-			price: Math.floor(item.price * 0.9 + Math.random() * 10)
-		}))
-		
-		// 实际项目中应该合并数据
-		loading.value = false
-		hasMore.value = recommendedProducts.length < 20
-		
-		uni.showToast({
-			title: '加载完成',
-			icon: 'success'
-		})
-	}, 2000)
-}
-
-// 添加到购物车
-const addToCart = (product: any) => {
-	uni.showToast({
-		title: '已添加到购物车',
-		icon: 'success'
-	})
-	cartCount.value++
-}
-
-// 显示用户菜单
-const showUserMenu = () => {
-	uni.showActionSheet({
-		itemList: ['个人中心', '我的订单', '用药提醒', '我的收藏', '设置'],
-		success: (res) => {
-			const pages = [
-				'/pages/user/profile',
-				'/pages/user/orders',
-				'/pages/user/reminders',
-				'/pages/user/favorites',
-				'/pages/user/settings'
-			]
-			if (pages[res.tapIndex]) {
-				uni.navigateTo({ url: pages[res.tapIndex] })
-			}
-		}
-	})
-}
-
-// 导航函数
-const navigateToSearch = () => uni.navigateTo({ url: '/pages/medicine/search' })
-const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
-const navigateToNews = () => uni.navigateTo({ url: '/pages/news/list' })
-const navigateToProduct = (product: any) => {
-	uni.navigateTo({
-		url: `/pages/medicine/detail?id=${product.id}`
-	})
-}
-const navigateToCategory = (categoryId: string) => {
-	uni.navigateTo({
-		url: `/pages/medicine/category?id=${categoryId}`
-	})
-}
-const navigateToConsultation = () => uni.navigateTo({ url: '/pages/medicine/consultation' })
-const navigateToPrescription = () => uni.navigateTo({ url: '/pages/medicine/prescription' })
-const navigateToOTC = () => uni.navigateTo({ url: '/pages/medicine/otc' })
-const navigateToHealthTools = () => uni.navigateTo({ url: '/pages/medicine/tools' })
-const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' })
-</script>
-
-<style>
-/* 全局重置 */
-.medic-home * {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-.medic-home {
-	width: 100%;
-	min-height: 100vh;
-	background: #f8fafc;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
-	line-height: 1.5;
-}
-
-/* 智能导航栏 */
-.smart-navbar {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
-	z-index: 1000;
-	box-shadow: 0 2px 20px rgba(76, 175, 80, 0.15);
-}
-
-.nav-container {
-	height: 60px;
-	padding: 0 16px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	max-width: 1400px;
-	margin: 0 auto;
-	width: 100%;
-}
-
-/* 品牌区域 */
-.brand-section {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-
-.brand-info {
-	display: flex;
-	flex-direction: column;
-}
-
-.brand-name {
-	font-size: 18px;
-	font-weight: bold;
-	color: white;
-	letter-spacing: 0.5px;
-}
-
-.brand-tag {
-	font-size: 11px;
-	color: rgba(255, 255, 255, 0.9);
-	margin-top: 2px;
-}
-
-/* 主滚动区域 */
-.main-scroll {
-	margin-top: 60px;
-	padding: 16px;
-	max-width: 1400px;
-	margin-left: auto;
-	margin-right: auto;
-	width: 100%;
-}
-
-/* 智能健康卡片 */
-.smart-health-card {
-	background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	color: white;
-}
-
-.health-content {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.health-header {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.health-title {
-	font-size: 20px;
-	font-weight: bold;
-}
-
-.health-subtitle {
-	font-size: 14px;
-	opacity: 0.9;
-}
-
-.health-tips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12px;
-	margin-top: 8px;
-}
-
-.tip-item {
-	font-size: 13px;
-	padding: 6px 12px;
-	background: rgba(255, 255, 255, 0.2);
-	border-radius: 20px;
-	backdrop-filter: blur(10px);
-}
-
-/* 智能分类网格 */
-.smart-categories {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.section-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	margin-bottom: 20px;
-}
-
-.section-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-}
-
-.section-desc {
-	font-size: 14px;
-	color: #666;
-}
-
-/* 分类网格布局 */
-.category-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-	gap: 16px;
-}
-
-.category-card {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 16px;
-	background: #f8f9fa;
-	border-radius: 12px;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	border: 1px solid transparent;
-}
-
-.category-card:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	border-color: var(--card-color, #4CAF50);
-}
-
-.card-icon {
-	width: 56px;
-	height: 56px;
-	border-radius: 28px;
-	background: var(--card-color, #4CAF50);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 12px;
-}
-
-.card-icon text {
-	font-size: 24px;
-	color: white;
-}
-
-.card-name {
-	font-size: 15px;
-	font-weight: 600;
-	color: #333;
-	margin-bottom: 4px;
-	text-align: center;
-}
-
-.card-desc {
-	font-size: 12px;
-	color: #666;
-	text-align: center;
-}
-
-/* 智能搜索 */
-.smart-search {
-	margin-bottom: 20px;
-}
-
-.search-input {
-	background: white;
-	border-radius: 12px;
-	padding: 16px 20px;
-	display: flex;
-	align-items: center;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-	border: 1px solid #e0e0e0;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-
-.search-input:hover {
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.search-icon {
-	font-size: 20px;
-	color: #4CAF50;
-	margin-right: 12px;
-}
-
-.search-placeholder {
-	font-size: 15px;
-	color: #999;
-	flex: 1;
-}
-
-.search-tools {
-	display: flex;
-	gap: 12px;
-}
-
-.tool-item {
-	font-size: 12px;
-	color: #4CAF50;
-	padding: 4px 12px;
-	background: rgba(76, 175, 80, 0.1);
-	border-radius: 15px;
-}
-
-/* 健康资讯 */
-.health-news {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.news-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 16px;
-}
-
-.news-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-}
-
-.news-more {
-	font-size: 14px;
-	color: #4CAF50;
-	cursor: pointer;
-}
-
-.news-swiper {
-	height: 200px;
-	border-radius: 12px;
-	overflow: hidden;
-}
-
-.news-content {
-	position: relative;
-	height: 100%;
-	border-radius: 12px;
-	overflow: hidden;
-}
-
-.news-image {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-.news-overlay {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
-	padding: 20px;
-	color: white;
-}
-
-.news-tag {
-	display: inline-block;
-	background: #4CAF50;
-	padding: 4px 12px;
-	border-radius: 12px;
-	font-size: 12px;
-	font-weight: 500;
-	margin-bottom: 8px;
-}
-
-.news-caption {
-	font-size: 16px;
-	font-weight: 600;
-	display: block;
-	line-height: 1.4;
-}
-
-/* 智能服务 */
-.smart-services {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.services-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-	gap: 20px;
-}
-
-.service-card {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 20px;
-	background: #f8f9fa;
-	border-radius: 12px;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-
-.service-card:hover {
-	transform: translateY(-4px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.service-icon {
-	width: 60px;
-	height: 60px;
-	border-radius: 30px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 12px;
-}
-
-.service-icon text {
-	font-size: 28px;
-	color: white;
-}
-
-.service-name {
-	font-size: 15px;
-	font-weight: 600;
-	color: #333;
-	margin-bottom: 4px;
-}
-
-.service-desc {
-	font-size: 12px;
-	color: #666;
-}
-
-/* 热销药品 */
-.hot-products {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.title-section {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.section-icon {
-	font-size: 20px;
-	color: #4CAF50;
-}
-
-.sort-tabs {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-	flex-wrap: wrap;
-}
-
-.sort-tab {
-	font-size: 13px;
-	color: #666;
-	padding: 6px 16px;
-	border-radius: 20px;
-	border: 1px solid #e0e0e0;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	white-space: nowrap;
-}
-
-.sort-tab.active {
-	background: #4CAF50;
-	color: white;
-	border-color: #4CAF50;
-}
-
-.sort-tab:hover {
-	background: #f5f5f5;
-}
-
-.sort-tab.active:hover {
-	background: #388E3C;
-}
-
-/* 产品网格 */
-.products-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-	gap: 20px;
-	margin-top: 20px;
-}
-
-.product-card {
-	background: #f8f9fa;
-	border-radius: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	border: 1px solid #e0e0e0;
-	position: relative;
-}
-
-.product-card:hover {
-	transform: translateY(-4px);
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-
-.product-badge {
-	position: absolute;
-	top: 12px;
-	left: 12px;
-	background: #FF5722;
-	color: white;
-	font-size: 11px;
-	padding: 4px 12px;
-	border-radius: 12px;
-	font-weight: 600;
-	z-index: 2;
-}
-
-.product-image {
-	width: 100%;
-	height: 160px;
-	object-fit: cover;
-	background: white;
-}
-
-.product-info {
-	padding: 16px;
-}
-
-.product-name {
-	font-size: 15px;
-	font-weight: 600;
-	color: #333;
-	margin-bottom: 4px;
-	display: block;
-	line-height: 1.4;
-}
-
-.product-spec {
-	font-size: 13px;
-	color: #666;
-	margin-bottom: 12px;
-	display: block;
-}
-
-.price-section {
-	display: flex;
-	align-items: baseline;
-	gap: 8px;
-	margin-bottom: 12px;
-}
-
-.current-price {
-	display: flex;
-	align-items: baseline;
-}
-
-.price-symbol {
-	font-size: 14px;
-	color: #FF5722;
-}
-
-.price-value {
-	font-size: 20px;
-	font-weight: bold;
-	color: #FF5722;
-	margin-left: 2px;
-}
-
-.original-price {
-	font-size: 13px;
-	color: #999;
-	text-decoration: line-through;
-}
-
-.product-meta {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	font-size: 12px;
-	margin-bottom: 12px;
-}
-
-.manufacturer {
-	color: #666;
-}
-
-.sales-count {
-	color: #999;
-}
-
-.product-action {
-	margin-top: 12px;
-}
-
-.cart-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 6px;
-	background: #4CAF50;
-	color: white;
-	padding: 8px 12px;
-	border-radius: 8px;
-	font-size: 13px;
-	font-weight: 500;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.cart-btn:hover {
-	background: #388E3C;
-}
-
-.cart-icon {
-	font-size: 14px;
-}
-
-.cart-text {
-	font-size: 13px;
-}
-
-/* 家庭常备药 */
-.family-medicine {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.section-subtitle {
-	font-size: 14px;
-	color: #666;
-	margin-left: 12px;
-}
-
-.family-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-	gap: 16px;
-	margin-top: 20px;
-}
-
-.family-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 16px;
-	background: #f8f9fa;
-	border-radius: 12px;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-
-.family-item:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.family-icon {
-	width: 48px;
-	height: 48px;
-	border-radius: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 12px;
-}
-
-.family-icon text {
-	font-size: 20px;
-	color: white;
-}
-
-.family-name {
-	font-size: 14px;
-	font-weight: 600;
-	color: #333;
-	margin-bottom: 4px;
-}
-
-.family-desc {
-	font-size: 12px;
-	color: #666;
-}
-
-/* 智能推荐 */
-.smart-recommend {
-	background: white;
-	border-radius: 16px;
-	padding: 20px;
-	margin-bottom: 20px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.recommend-filters {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-	flex-wrap: wrap;
-}
-
-.filter-item {
-	font-size: 13px;
-	color: #666;
-	padding: 6px 16px;
-	border-radius: 20px;
-	border: 1px solid #e0e0e0;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	white-space: nowrap;
-}
-
-.filter-item.active {
-	background: #4CAF50;
-	color: white;
-	border-color: #4CAF50;
-}
-
-.filter-item:hover {
-	background: #f5f5f5;
-}
-
-.filter-item.active:hover {
-	background: #388E3C;
-}
-
-.recommend-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: 20px;
-	margin-top: 20px;
-}
-
-.recommend-product {
-	background: #f8f9fa;
-	border-radius: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	border: 1px solid #e0e0e0;
-}
-
-.recommend-product:hover {
-	transform: translateY(-4px);
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-}
-
-.product-image-container {
-	position: relative;
-	height: 180px;
-}
-
-.product-image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	background: white;
-}
-
-.product-tags {
-	position: absolute;
-	top: 12px;
-	left: 12px;
-	display: flex;
-	gap: 8px;
-}
-
-.product-tag, .featured-tag {
-	padding: 4px 10px;
-	border-radius: 10px;
-	font-size: 11px;
-	font-weight: 600;
-	color: white;
-}
-
-.product-tag {
-	background: rgba(76, 175, 80, 0.9);
-}
-
-.featured-tag {
-	background: rgba(255, 87, 34, 0.9);
-}
-
-.product-details {
-	padding: 16px;
-}
-
-.product-title {
-	font-size: 16px;
-	font-weight: 600;
-	color: #333;
-	margin-bottom: 4px;
-	display: block;
-	line-height: 1.4;
-}
-
-.product-specification {
-	font-size: 13px;
-	color: #666;
-	margin-bottom: 12px;
-	display: block;
-}
-
-.product-rating {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 12px;
-	font-size: 13px;
-}
-
-.rating-stars {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.star-icon {
-	font-size: 14px;
-	color: #FFC107;
-}
-
-.rating-value {
-	font-weight: 600;
-	color: #333;
-}
-
-.reviews-count {
-	color: #666;
-}
-
-.product-actions {
-	display: flex;
-	justify-content: flex-end;
-	margin-top: 12px;
-}
-
-.add-to-cart {
-	width: 36px;
-	height: 36px;
-	border-radius: 18px;
-	background: #4CAF50;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.add-to-cart:hover {
-	background: #388E3C;
-	transform: scale(1.1);
-}
-
-.cart-icon {
-	font-size: 16px;
-	color: white;
-}
-
-/* 健康提醒 */
-.health-reminder {
-	background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
-	border-radius: 16px;
-	padding: 16px 20px;
-	margin-bottom: 20px;
-	color: white;
-}
-
-.reminder-content {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.reminder-icon {
-	font-size: 24px;
-}
-
-.reminder-text {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.reminder-title {
-	font-size: 15px;
-	font-weight: 600;
-}
-
-.reminder-desc {
-	font-size: 13px;
-	opacity: 0.9;
-}
-
-.reminder-action {
-	padding: 6px 16px;
-	background: rgba(255, 255, 255, 0.2);
-	border-radius: 20px;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.reminder-action:hover {
-	background: rgba(255, 255, 255, 0.3);
-}
-
-.action-text {
-	font-size: 13px;
-	font-weight: 500;
-}
-
-/* 加载状态 */
-.loading-state {
-	padding: 40px 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.loading-spinner {
-	width: 32px;
-	height: 32px;
-	border: 3px solid #f0f0f0;
-	border-top-color: #4CAF50;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
-	margin-bottom: 12px;
-}
-
-@keyframes spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
-}
-
-.loading-text {
-	font-size: 14px;
-	color: #666;
-}
-
-.no-more {
-	padding: 30px 0;
-	text-align: center;
-	border-top: 1px solid #f0f0f0;
-	margin-top: 10px;
-}
-
-.no-more-text {
-	font-size: 13px;
-	color: #999;
-}
-
-/* 安全区域 */
-.safe-area {
-	height: 20px;
-	width: 100%;
-}
-
-/* ===== 响应式设计 ===== */
-
-/* 超小屏手机 (小于360px) */
-@media screen and (max-width: 360px) {
-	.nav-container {
-		padding: 0 12px;
-	}
-	
-	.brand-name {
-		font-size: 16px;
-	}
-	
-	.brand-tag {
-		font-size: 10px;
-	}
-	
-	.smart-features {
-		gap: 12px;
-	}
-	
-	.feature-label {
-		display: none;
-	}
-	
-	.main-scroll {
-		padding: 12px;
-	}
-	
-	.category-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 12px;
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.products-grid {
-		grid-template-columns: 1fr;
-	}
-	
-	.recommend-grid {
-		grid-template-columns: 1fr;
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.news-swiper {
-		height: 160px;
-	}
-	
-	.news-caption {
-		font-size: 14px;
-	}
-}
-
-/* 小屏手机 (361px-414px) */
-@media screen and (min-width: 361px) and (max-width: 414px) {
-	.category-grid {
-		grid-template-columns: repeat(3, 1fr);
-		gap: 12px;
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 16px;
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: 1fr;
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.news-swiper {
-		height: 180px;
-	}
-}
-
-/* 中屏手机 (415px-480px) */
-@media screen and (min-width: 415px) and (max-width: 480px) {
-	.category-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.news-swiper {
-		height: 200px;
-	}
-}
-
-/* 大屏手机/小平板 (481px-768px) */
-@media screen and (min-width: 481px) and (max-width: 768px) {
-	.nav-container {
-		padding: 0 20px;
-	}
-	
-	.category-grid {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.news-swiper {
-		height: 220px;
-	}
-}
-
-/* 平板设备 (769px-1024px) */
-@media screen and (min-width: 769px) and (max-width: 1024px) {
-	.nav-container {
-		padding: 0 24px;
-		max-width: 100%;
-	}
-	
-	.main-scroll {
-		max-width: 100%;
-		padding: 20px 24px;
-	}
-	
-	.category-grid {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.news-swiper {
-		height: 240px;
-	}
-}
-
-/* 桌面端 (1025px以上) */
-@media screen and (min-width: 1025px) {
-	.nav-container {
-		padding: 0 32px;
-	}
-	
-	.main-scroll {
-		padding: 24px 32px;
-	}
-	
-	.category-grid {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	
-	.services-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-	
-	.family-grid {
-		grid-template-columns: repeat(3, 1fr);
-	}
-	
-	.news-swiper {
-		height: 260px;
-	}
-}
-
-/* 大桌面端 (1400px以上) */
-@media screen and (min-width: 1400px) {
-	.category-grid {
-		grid-template-columns: repeat(5, 1fr);
-		gap: 24px;
-	}
-	
-	.products-grid {
-		grid-template-columns: repeat(5, 1fr);
-	}
-	
-	.recommend-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-}
-
-/* 暗黑模式适配 */
-@media (prefers-color-scheme: dark) {
-	.medic-home {
-		background: #121212;
-	}
-	
-	.smart-categories,
-	.health-news,
-	.smart-services,
-	.hot-products,
-	.family-medicine,
-	.smart-recommend {
-		background: #1e1e1e;
-		border-color: #333;
-	}
-	
-	.search-input {
-		background: #1e1e1e;
-		border-color: #333;
-	}
-	
-	.category-card,
-	.service-card,
-	.product-card,
-	.family-item,
-	.recommend-product {
-		background: #2d2d2d;
-		border-color: #444;
-	}
-	
-	.section-title,
-	.card-name,
-	.service-name,
-	.product-name,
-	.family-name,
-	.product-title {
-		color: #fff;
-	}
-	
-	.section-desc,
-	.card-desc,
-	.service-desc,
-	.product-spec,
-	.product-specification,
-	.family-desc {
-		color: #aaa;
-	}
-	
-	.search-placeholder {
-		color: #888;
-	}
-	
-	.sort-tab,
-	.filter-item {
-		background: #333;
-		border-color: #444;
-		color: #ccc;
-	}
-	
-	.sort-tab.active,
-	.filter-item.active {
-		background: #4CAF50;
-		color: white;
-	}
-	
-	.sort-tab:hover,
-	.filter-item:hover {
-		background: #444;
-	}
-	
-	.sort-tab.active:hover,
-	.filter-item.active:hover {
-		background: #388E3C;
-	}
-	
-	.tool-item {
-		background: rgba(76, 175, 80, 0.2);
-		color: #4CAF50;
-	}
-	
-	.manufacturer,
-	.sales-count,
-	.reviews-count,
-	.original-price {
-		color: #888;
-	}
-}
-</style>
\ No newline at end of file
diff --git a/pages/mall/consumer/index.uvue b/pages/mall/consumer/index.uvue
index 854af7d0..d074d86d 100644
--- a/pages/mall/consumer/index.uvue
+++ b/pages/mall/consumer/index.uvue
@@ -244,85 +244,7 @@
 				</view>
 			</view>
 
-			<!-- 智能推荐 -->
-			<view class="smart-recommend">
-				<view class="section-header">
-					<view class="title-section">
-						<text class="section-icon">✨</text>
-						<text class="section-title">智能推荐</text>
-					</view>
-					<view class="recommend-filters">
-						<text 
-							v-for="filter in recommendFilters" 
-							:key="filter.id"
-							:class="['filter-item', { active: activeFilter === filter.id }]"
-							@click="switchFilter(filter.id)"
-						>
-							{{ filter.name }}
-						</text>
-					</view>
-				</view>
-				
-				<view class="recommend-grid">
-					<view 
-						v-for="product in recommendedProducts" 
-						:key="product.id"
-						class="recommend-product"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-image-container">
-							<image 
-								class="product-image" 
-								:src="product.image" 
-								mode="aspectFill"
-							/>
-							<view class="product-tags">
-								<text v-if="product.tag" class="product-tag">{{ product.tag }}</text>
-								<text v-if="product.featured" class="featured-tag">{{ product.featured }}</text>
-							</view>
-						</view>
-						
-						<view class="product-details">
-							<text class="product-title">{{ product.name }}</text>
-							<text class="product-specification">{{ product.specification }}</text>
-							
-							<view class="product-rating">
-								<view class="rating-stars">
-									<text class="star-icon">⭐</text>
-									<text class="rating-value">{{ product.rating }}</text>
-								</view>
-								<text class="reviews-count">{{ product.reviews }}条评价</text>
-							</view>
-							
-							<view class="price-section">
-								<view class="current-price">
-									<text class="price-symbol">¥</text>
-									<text class="price-value">{{ product.price }}</text>
-								</view>
-								<text class="original-price" v-if="product.originalPrice > product.price">
-									¥{{ product.originalPrice }}
-								</text>
-							</view>
-							
-							<view class="product-actions">
-								<view class="add-to-cart" @click.stop="addToCart(product)">
-									<text class="cart-icon">🛒</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				
-				<!-- 加载状态 -->
-				<view v-if="loading" class="loading-state">
-					<view class="loading-spinner"></view>
-					<text class="loading-text">加载中...</text>
-				</view>
-				
-				<view v-if="!hasMore && recommendedProducts.length > 0" class="no-more">
-					<text class="no-more-text">--- 已加载全部内容 ---</text>
-				</view>
-			</view>
+			<!-- 智能推荐模块已隐藏 -->
 
 			<!-- 健康提醒 -->
 			<view class="health-reminder">
@@ -347,6 +269,8 @@
 <script setup lang="uts">
 import { ref, reactive, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Product, Category } from '@/utils/supabaseService.uts'
 
 // 响应式数据
 const statusBarHeight = ref(0)
@@ -359,9 +283,8 @@ const activeFilter = ref('recommend')
 const currentPage = ref(1)
 
 // 数据源
-const allProducts = ref<any[]>([])
-const hotProducts = ref<any[]>([])
-const recommendedProducts = ref<any[]>([])
+const hotProducts = ref<Product[]>([])
+const recommendedProducts = ref<Product[]>([])
 
 // 屏幕尺寸检测
 const isMobile = ref(false)
@@ -372,35 +295,18 @@ const lastScrollTop = ref(0)
 const scrollThreshold = 30 // 降低滚动阈值，使其更灵敏
 const scrollingUp = ref(false)
 
-// 分类数据
-const categories = [
-	{ id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
-	{ id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
-	{ id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
-	{ id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
-	{ id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
-	{ id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
-	{ id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
-	{ id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
-	{ id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
-	{ id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
-]
+// 分类数据 - 从Supabase获取
+const categories = ref<Category[]>([])
 
 // 排序标签
 const sortTabs = [
+	{ id: 'recommend', name: '智能推荐' },
 	{ id: 'sales', name: '销量' },
 	{ id: 'price', name: '价格' },
 	{ id: 'new', name: '新品' },
-	{ id: 'recommend', name: '推荐' }
+	{ id: 'discount', name: '特价' }
 ]
 
-// 推荐筛选器
-const recommendFilters = [
-	{ id: 'recommend', name: '智能推荐' },
-	{ id: 'hot', name: '热门商品' },
-	{ id: 'discount', name: '限时优惠' },
-	{ id: 'quality', name: '品质优选' }
-]
 
 // 健康资讯
 const healthNews = [
@@ -424,100 +330,89 @@ const healthNews = [
 	}
 ]
 
+// 获取分类数据
+const loadCategories = async () => {
+  try {
+    const categoriesData = await supabaseService.getCategories()
+    // 映射字段：将description映射为desc，保持与原有结构兼容
+    categories.value = categoriesData.map((cat: any) => ({
+      id: cat.id,
+      name: cat.name,
+      icon: cat.icon || '📦',
+      desc: cat.description || cat.desc || '',
+      color: cat.color || '#4CAF50'
+    }))
+  } catch (error) {
+    console.error('加载分类数据失败:', error)
+    // 如果加载失败，使用默认分类作为后备
+    categories.value = [
+      { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
+      { id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
+      { id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
+      { id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
+      { id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' }
+    ]
+  }
+}
+
+  // 获取热销商品（根据当前排序方式）
+const loadHotProducts = async () => {
+  try {
+    let products: Product[] = []
+    const limit = 6
+    
+    console.log('加载热销商品，当前排序方式:', activeSort.value)
+    
+    switch (activeSort.value) {
+      case 'sales':
+        console.log('调用 getHotProducts')
+        products = await supabaseService.getHotProducts(limit)
+        break
+      case 'price':
+        console.log('调用 getProductsByPrice')
+        // 按价格升序（从低到高）
+        products = await supabaseService.getProductsByPrice(limit, true)
+        break
+      case 'new':
+        console.log('调用 getProductsByNewest')
+        // 按创建时间，最新的在前
+        products = await supabaseService.getProductsByNewest(limit)
+        break
+      case 'recommend':
+        console.log('调用 getRecommendedProducts')
+        // 推荐商品（带badge的商品）
+        products = await supabaseService.getRecommendedProducts(limit)
+        break
+      case 'discount':
+        console.log('调用 getDiscountProducts')
+        // 特价商品（badge为'特价'）
+        products = await supabaseService.getDiscountProducts(limit)
+        break
+      default:
+        console.log('调用默认 getHotProducts')
+        products = await supabaseService.getHotProducts(limit)
+    }
+    
+    console.log('加载到的商品数量:', products.length)
+    hotProducts.value = products
+  } catch (error) {
+    console.error('加载热销商品失败:', error)
+    hotProducts.value = []
+  }
+}
+
+// 获取推荐商品
+const loadRecommendedProducts = async (limit: number = 6) => {
+  recommendedProducts.value = await supabaseService.getRecommendedProducts(limit)
+}
+
 // 初始化数据
-const initData = () => {
-	const manufacturers = ['修正药业', '白云山', '养生堂', '三九医药', '同仁堂', '云南白药', '拜耳', '辉瑞']
-	const names = ['布洛芬', '板蓝根', '维生素C', '胃康灵', '阿莫西林', '连花清瘟', '氨溴索', '氯雷他定', '感冒灵', '健胃消食片', '阿司匹林', '蒙脱石散']
-	const tags = ['处方药', '中成药', '止咳化痰', '抗过敏', '感冒发烧', '肠胃用药', '消炎镇痛']
-	const featureds = ['医生推荐', '热销爆款', '家庭必备', '季节必备', '店长推荐']
-
-	const products = [] as any[]
-	for (let i = 0; i < 50; i++) {
-		const nameIdx = Math.floor(Math.random() * names.length)
-		const name = names[nameIdx]
-		const price = parseFloat((10 + Math.random() * 100).toFixed(1))
-		const originalPrice = parseFloat((price * (1.1 + Math.random() * 0.5)).toFixed(1))
-		const sales = Math.floor(Math.random() * 5000)
-		
-		// 随机店铺ID，避免全部是同一家
-		const randomShopSuffix = Math.floor(Math.random() * 20) + 1
-		
-		products.push({
-			id: `prod_${i}`,
-			shopId: `shop_${randomShopSuffix}`,
-			shopName: manufacturers[Math.floor(Math.random() * manufacturers.length)] + '官方旗舰店',
-			name: name + (Math.random() > 0.5 ? '胶囊' : '颗粒'),
-			specification: Math.random() > 0.5 ? '0.3g*24粒' : '10g*10袋',
-			price: price,
-			originalPrice: originalPrice,
-			image: '/static/images/default-product.png',
-			manufacturer: manufacturers[Math.floor(Math.random() * manufacturers.length)],
-			sales: sales,
-			rating: (3.5 + Math.random() * 1.5).toFixed(1),
-			reviews: Math.floor(Math.random() * 500),
-			tag: tags[Math.floor(Math.random() * tags.length)],
-			featured: Math.random() > 0.7 ? featureds[Math.floor(Math.random() * featureds.length)] : '',
-			badge: sales > 3000 ? '热销' : (price < 20 ? '特价' : (Math.random() > 0.8 ? '新品' : '')),
-			// Attributes for filtering
-			isNew: Math.random() > 0.8,
-			isRecommend: Math.random() > 0.6,
-			isHot: sales > 2000,
-			isDiscount: (originalPrice - price) > 15,
-			isQuality: price > 60
-		})
-	}
-	allProducts.value = products
-	
-	filterHotProducts()
-	filterRecommendedProducts()
+const initData = async () => {
+	await loadCategories()
+	await loadHotProducts()
+	await loadRecommendedProducts()
 }
 
-// 筛选热销商品
-const filterHotProducts = () => {
-	let list = [...allProducts.value]
-	
-	if (activeSort.value === 'sales') {
-		list.sort((a, b) => b.sales - a.sales)
-	} else if (activeSort.value === 'price') {
-		list.sort((a, b) => a.price - b.price)
-	} else if (activeSort.value === 'new') {
-		list = list.filter(p => p.isNew)
-	} else if (activeSort.value === 'recommend') {
-		list = list.filter(p => p.isRecommend)
-	}
-	
-	// 如果筛选后数量不足4个，补足
-	if (list.length < 4) {
-		const remaining = allProducts.value.filter(p => !list.includes(p))
-		list = [...list, ...remaining]
-	}
-	
-	hotProducts.value = list.slice(0, 4)
-}
-
-// 筛选推荐商品
-const filterRecommendedProducts = () => {
-	let list = [...allProducts.value]
-	
-	if (activeFilter.value === 'hot') {
-		list = list.filter(p => p.isHot)
-	} else if (activeFilter.value === 'discount') {
-		list = list.filter(p => p.isDiscount)
-	} else if (activeFilter.value === 'quality') {
-		list = list.filter(p => p.isQuality)
-	} else {
-		// 默认随机排序
-		list.sort(() => Math.random() - 0.5)
-	}
-	
-	// 如果筛选后数量不足4个，补足
-	if (list.length < 4) {
-		const remaining = allProducts.value.filter(p => !list.includes(p))
-		list = [...list, ...remaining]
-	}
-	
-	recommendedProducts.value = list.slice(0, 4)
-}
 
 // 家庭常备药
 const familyItems = [
@@ -572,9 +467,9 @@ const familyItems = [
 ]
 
 // 生命周期
-onMounted(() => {
+onMounted(async () => {
 	initPage()
-	initData()
+	await initData()
 })
 
 // 页面显示时重置状态
@@ -689,13 +584,15 @@ const switchCategory = (category: any) => {
 // 切换排序
 const switchSort = (sortId: string) => {
 	activeSort.value = sortId
-	filterHotProducts()
+	// 重新加载热销商品，排序由 Supabase 服务处理
+	loadHotProducts()
 }
 
 // 切换筛选器
 const switchFilter = (filterId: string) => {
 	activeFilter.value = filterId
-	filterRecommendedProducts()
+	// 重新加载推荐商品，筛选由 Supabase 服务处理
+	loadRecommendedProducts()
 }
 
 // 查看新闻详情
@@ -718,27 +615,33 @@ const onRefresh = () => {
 }
 
 // 加载更多
-const loadMore = () => {
+const loadMore = async () => {
 	if (loading.value || !hasMore.value) return
 	
 	loading.value = true
-	setTimeout(() => {
-		// 模拟加载更多数据
-		const newProducts = [...recommendedProducts].map((item, index) => ({
-			...item,
-			id: `new${index}`,
-			price: Math.floor(item.price * 0.9 + Math.random() * 10)
-		}))
+	try {
+		// 增加限制以加载更多推荐商品
+		const currentLimit = recommendedProducts.value.length + 6
+		await loadRecommendedProducts(currentLimit)
 		
-		// 实际项目中应该合并数据
-		loading.value = false
-		hasMore.value = recommendedProducts.length < 20
+		// 假设如果返回的商品数量小于请求的限制，则没有更多数据
+		if (recommendedProducts.value.length < currentLimit) {
+			hasMore.value = false
+		}
 		
 		uni.showToast({
 			title: '加载完成',
 			icon: 'success'
 		})
-	}, 2000)
+	} catch (error) {
+		console.error('加载更多失败:', error)
+		uni.showToast({
+			title: '加载失败',
+			icon: 'none'
+		})
+	} finally {
+		loading.value = false
+	}
 }
 
 // 添加到购物车
diff --git a/pages/mall/consumer/indexback.uvue b/pages/mall/consumer/indexback.uvue
deleted file mode 100644
index f0cffee0..00000000
--- a/pages/mall/consumer/indexback.uvue
+++ /dev/null
@@ -1,1540 +0,0 @@
-<!-- pages/mall/consumer/index.uvue -->
-<template>
-	<view class="consumer-home">
-		<!-- 自定义顶部导航栏（简化版） -->
-		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-			<view class="nav-content">
-				<view class="location" @click="showCityPicker">
-					<text class="location-icon">📍</text>
-					<text class="location-text">{{ currentCity }}</text>
-					<text class="location-arrow">▼</text>
-				</view>
-				
-				<view class="nav-icons">
-					<view class="icon-item" @click="navigateToMessages">
-						<text class="icon">💬</text>
-						<text v-if="unreadMessageCount > 0" class="message-badge">{{ unreadMessageCount }}</text>
-					</view>
-					<view class="icon-item" @click="navigateToCart">
-						<text class="icon">🛒</text>
-						<text v-if="cartCount > 0" class="cart-badge">{{ cartCount }}</text>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 主内容区 -->
-		<scroll-view 
-			scroll-y 
-			class="main-content"
-			:style="{ height: scrollViewHeight + 'px' }"
-			refresher-enabled
-			:refresher-triggered="refreshing"
-			@refresherrefresh="onRefresh"
-			@scrolltolower="loadMore"
-			:show-scrollbar="false"
-		>
-			<!-- 商品分类区域 - 修复横向滚动 -->
-			<view class="category-section">
-				<scroll-view 
-					scroll-x 
-					class="category-scroll" 
-					:show-scrollbar="false"
-					:scroll-left="scrollLeft"
-					@scroll="onScroll"
-				>
-					<view class="category-container">
-						<view 
-							v-for="(category, index) in categoryList" 
-							:key="category.id"
-							:class="['category-item', { active: activeCategory === category.id }]"
-							@click="switchCategory(category.id, index)"
-						>
-							<view class="category-icon-wrapper">
-								<text class="category-icon">{{ category.icon }}</text>
-							</view>
-							<text class="category-name">{{ category.name }}</text>
-						</view>
-					</view>
-				</scroll-view>
-			</view>
-
-			<!-- 搜索栏 -->
-			<view class="search-section" @click="navigateToSearch">
-				<view class="search-container">
-					<view class="search-box">
-						<text class="search-icon">🔍</text>
-						<text class="search-placeholder">搜索商品/品牌/店铺</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 轮播图 -->
-			<view class="banner-section">
-				<swiper 
-					class="banner-swiper" 
-					:autoplay="true" 
-					:interval="4000" 
-					:duration="500"
-					:circular="true"
-					:indicator-dots="true"
-					indicator-color="rgba(255,255,255,0.6)"
-					indicator-active-color="#ff5000"
-				>
-					<swiper-item v-for="(banner, index) in bannerList" :key="banner.id">
-						<image 
-							class="banner-image" 
-							:src="banner.image_url" 
-							mode="aspectFill"
-						/>
-					</swiper-item>
-				</swiper>
-			</view>
-
-			<!-- 快捷入口 -->
-			<view class="quick-actions">
-				<view class="action-item" @click="navigateToFlashSale">
-					<view class="action-icon flash">⚡</view>
-					<text class="action-text">限时秒杀</text>
-				</view>
-				<view class="action-item" @click="navigateToCoupons">
-					<view class="action-icon coupon">🎫</view>
-					<text class="action-text">领券中心</text>
-				</view>
-				<view class="action-item" @click="navigateToDailyDeals">
-					<view class="action-icon daily">🔥</view>
-					<text class="action-text">每日特价</text>
-				</view>
-				<view class="action-item" @click="navigateToBrand">
-					<view class="action-icon brand">🏷️</view>
-					<text class="action-text">品牌特卖</text>
-				</view>
-			</view>
-
-			<!-- 限时秒杀 -->
-			<view class="flash-sale-section">
-				<view class="section-header">
-					
-				</view>
-				
-				<!-- 限时秒杀商品网格 -->
-				<view class="flash-grid">
-					<view 
-						v-for="(product, index) in flashSaleProducts" 
-						:key="index"
-						class="flash-product"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-image-wrapper">
-							<image 
-								class="product-image" 
-								:src="product.image" 
-								mode="aspectFill"
-							/>
-							<view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
-						</view>
-						<view class="price-info">
-							<text class="flash-price">¥{{ product.price }}</text>
-							<text class="original-price">¥{{ product.original_price }}</text>
-							<view class="progress-container">
-								<view class="progress-bar">
-									<view class="progress-inner" :style="{ width: product.soldPercent + '%' }"></view>
-								</view>
-								<text class="sold-text">已抢{{ product.soldPercent }}%</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<!-- 为你推荐 - 瀑布流布局 -->
-			<view class="recommend-section">
-				<view class="section-header">
-					<view class="title-with-icon">
-						<text class="recommend-icon">❤️</text>
-						<text class="section-title">为你推荐</text>
-					</view>
-				</view>
-				
-				<!-- 瀑布流容器 -->
-				<view class="waterfall-container">
-					<!-- 左列 -->
-					<view class="waterfall-column left-column">
-						<view 
-							v-for="(product, index) in leftColumnProducts" 
-							:key="product.id"
-							class="product-card"
-							@click="navigateToProduct(product)"
-						>
-							<view class="product-image-wrapper">
-								<image 
-									class="product-image" 
-									:src="product.image" 
-									mode="widthFix"
-									lazy-load="true"
-								/>
-								<view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
-							</view>
-							<view class="product-info">
-								<text class="product-title">{{ product.name }}</text>
-								<view class="price-section">
-									<view class="current-price">
-										<text class="price-symbol">¥</text>
-										<text class="price-value">{{ product.price }}</text>
-									</view>
-									<text v-if="product.original_price > product.price" class="original-price">
-										¥{{ product.original_price }}
-									</text>
-								</view>
-								<view class="product-meta">
-									<text class="sales-count">{{ product.sales }}人已买</text>
-									<view class="shop-info" v-if="product.shop">
-										<text class="shop-name">{{ product.shop }}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-					
-					<!-- 右列 -->
-					<view class="waterfall-column right-column">
-						<view 
-							v-for="(product, index) in rightColumnProducts" 
-							:key="product.id"
-							class="product-card"
-							@click="navigateToProduct(product)"
-						>
-							<view class="product-image-wrapper">
-								<image 
-									class="product-image" 
-									:src="product.image" 
-									mode="widthFix"
-									lazy-load="true"
-								/>
-								<view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
-							</view>
-							<view class="product-info">
-								<text class="product-title">{{ product.name }}</text>
-								<view class="price-section">
-									<view class="current-price">
-										<text class="price-symbol">¥</text>
-										<text class="price-value">{{ product.price }}</text>
-									</view>
-									<text v-if="product.original_price > product.price" class="original-price">
-										¥{{ product.original_price }}
-									</text>
-								</view>
-								<view class="product-meta">
-									<text class="sales-count">{{ product.sales }}人已买</text>
-									<view class="shop-info" v-if="product.shop">
-										<text class="shop-name">{{ product.shop }}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				
-				<!-- 加载状态 -->
-				<view v-if="loading" class="loading-container">
-					<view class="loading-spinner"></view>
-					<text class="loading-text">加载中...</text>
-				</view>
-				
-				<view v-if="!hasMore && productList.length > 0" class="no-more">
-					<text>--- 我是有底线的 ---</text>
-				</view>
-			</view>
-			
-			<!-- 底部安全区域 -->
-			<view class="safe-area"></view>
-		</scroll-view>
-	</view>
-</template>
-
-<script setup lang="uts">
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
-
-// 响应式数据
-const bannerList = ref<any[]>([])
-const categoryList = ref<any[]>([])
-const productList = ref<any[]>([])
-const flashSaleProducts = ref<any[]>([])
-const currentCity = ref<string>('北京市')
-const refreshing = ref<boolean>(false)
-const loading = ref<boolean>(false)
-const hasMore = ref<boolean>(true)
-const page = ref<number>(1)
-const activeCategory = ref<string>('1')
-const activeSort = ref<string>('recommend')
-const statusBarHeight = ref<number>(0)
-const scrollViewHeight = ref<number>(0)
-const scrollLeft = ref<number>(0)
-const cartCount = ref<number>(0)
-const unreadMessageCount = ref<number>(3)
-
-// 倒计时数据
-const countdown = reactive({
-	hours: '02',
-	minutes: '30',
-	seconds: '15'
-})
-
-// 排序选项
-const sortOptions = [
-	{ id: 'recommend', name: '推荐' },
-	{ id: 'new', name: '新品' },
-	{ id: 'hot', name: '热销' },
-	{ id: 'priceAsc', name: '价格↑' },
-	{ id: 'priceDesc', name: '价格↓' }
-]
-
-// 计算瀑布流列数据
-const leftColumnProducts = computed(() => {
-	return productList.value.filter((_, index) => index % 2 === 0)
-})
-
-const rightColumnProducts = computed(() => {
-	return productList.value.filter((_, index) => index % 2 === 1)
-})
-
-// Mock 数据
-const mockData = {
-	banners: [
-		{
-			id: '1',
-			title: '双11狂欢购',
-			image_url: 'https://picsum.photos/750/350?random=1'
-		},
-		{
-			id: '2',
-			title: '品牌品质日',
-			image_url: 'https://picsum.photos/750/350?random=2'
-		},
-		{
-			id: '3',
-			title: '新人专享礼',
-			image_url: 'https://picsum.photos/750/350?random=3'
-		}
-	],
-	
-	categories: [
-		{ id: '1', name: '推荐', icon: '⭐' },
-		{ id: '2', name: '女装', icon: '👗' },
-		{ id: '3', name: '男装', icon: '👔' },
-		{ id: '4', name: '鞋靴', icon: '👠' },
-		{ id: '5', name: '箱包', icon: '👜' },
-		{ id: '6', name: '美妆', icon: '💄' },
-		{ id: '7', name: '数码', icon: '📱' },
-		{ id: '8', name: '家电', icon: '📺' },
-		{ id: '9', name: '家居', icon: '🏠' },
-		{ id: '10', name: '母婴', icon: '👶' },
-		{ id: '11', name: '食品', icon: '🍎' },
-		{ id: '12', name: '运动', icon: '⚽' },
-		{ id: '13', name: '汽车', icon: '🚗' },
-		{ id: '14', name: '百货', icon: '🛒' },
-		{ id: '15', name: '图书', icon: '📚' },
-		{ id: '16', name: '玩具', icon: '🧸' },
-		{ id: '17', name: '珠宝', icon: '💎' },
-		{ id: '18', name: '手表', icon: '⌚' },
-		{ id: '19', name: '宠物', icon: '🐶' },
-		{ id: '20', name: '文具', icon: '✏️' }
-	],
-	
-	flashSaleProducts: [
-		{
-			id: '1001',
-			name: '无线蓝牙耳机',
-			price: 299,
-			original_price: 599,
-			image: 'https://picsum.photos/200/200?random=1',
-			sales: 150,
-			soldPercent: 75,
-			tag: '秒杀'
-		},
-		{
-			id: '1002',
-			name: '运动T恤',
-			price: 79,
-			original_price: 159,
-			image: 'https://picsum.photos/200/200?random=2',
-			sales: 200,
-			soldPercent: 80,
-			tag: '爆款'
-		},
-		{
-			id: '1003',
-			name: '智能手环',
-			price: 199,
-			original_price: 299,
-			image: 'https://picsum.photos/200/200?random=3',
-			sales: 180,
-			soldPercent: 60,
-			tag: '新品'
-		},
-		{
-			id: '1004',
-			name: '电动牙刷',
-			price: 89,
-			original_price: 159,
-			image: 'https://picsum.photos/200/200?random=4',
-			sales: 250,
-			soldPercent: 90,
-			tag: '热卖'
-		},
-		{
-			id: '1005',
-			name: '保温杯',
-			price: 49,
-			original_price: 99,
-			image: 'https://picsum.photos/200/200?random=5',
-			sales: 300,
-			soldPercent: 85,
-			tag: '秒杀'
-		},
-		{
-			id: '1006',
-			name: '智能手表',
-			price: 399,
-			original_price: 599,
-			image: 'https://picsum.photos/200/200?random=6',
-			sales: 180,
-			soldPercent: 70,
-			tag: '爆款'
-		},
-		{
-			id: '1007',
-			name: '运动鞋',
-			price: 199,
-			original_price: 299,
-			image: 'https://picsum.photos/200/200?random=7',
-			sales: 220,
-			soldPercent: 80,
-			tag: '热卖'
-		},
-		{
-			id: '1008',
-			name: '保温饭盒',
-			price: 89,
-			original_price: 129,
-			image: 'https://picsum.photos/200/200?random=8',
-			sales: 190,
-			soldPercent: 75,
-			tag: '新品'
-		}
-	],
-	
-	products: [
-		{
-			id: '2001',
-			name: '智能手机 5G全网通 大内存',
-			price: 3999,
-			original_price: 4999,
-			image: 'https://picsum.photos/300/400?random=6',
-			sales: 500,
-			shop: '官方旗舰店',
-			tag: '官方'
-		},
-		{
-			id: '2002',
-			name: '笔记本电脑 轻薄本 学生办公',
-			price: 5999,
-			original_price: 6999,
-			image: 'https://picsum.photos/300/300?random=7',
-			sales: 300,
-			shop: '品牌专卖店',
-			tag: '折扣'
-		},
-		{
-			id: '2003',
-			name: '运动鞋 透气舒适跑步鞋',
-			price: 299,
-			original_price: 499,
-			image: 'https://picsum.photos/300/500?random=8',
-			sales: 800,
-			shop: '运动专营店'
-		},
-		{
-			id: '2004',
-			name: '电饭煲 智能预约多功能',
-			price: 399,
-			original_price: 599,
-			image: 'https://picsum.photos/300/350?random=9',
-			sales: 450,
-			shop: '家电旗舰店',
-			tag: '热卖'
-		},
-		{
-			id: '2005',
-			name: '护肤品套装 保湿补水',
-			price: 299,
-			original_price: 399,
-			image: 'https://picsum.photos/300/450?random=10',
-			sales: 600,
-			shop: '美妆官方店'
-		},
-		{
-			id: '2006',
-			name: '儿童玩具积木益智',
-			price: 199,
-			original_price: 299,
-			image: 'https://picsum.photos/300/320?random=11',
-			sales: 350,
-			shop: '母婴专营店',
-			tag: '新品'
-		},
-		{
-			id: '2007',
-			name: '智能手表 心率监测',
-			price: 899,
-			original_price: 1299,
-			image: 'https://picsum.photos/300/380?random=12',
-			sales: 280,
-			shop: '数码旗舰店'
-		},
-		{
-			id: '2008',
-			name: '羽绒服 冬季保暖',
-			price: 499,
-			original_price: 899,
-			image: 'https://picsum.photos/300/420?random=13',
-			sales: 420,
-			shop: '服装旗舰店',
-			tag: '爆款'
-		}
-	]
-}
-
-// 生命周期
-onMounted(() => {
-	// 获取状态栏高度
-	const systemInfo = uni.getSystemInfoSync()
-	statusBarHeight.value = systemInfo.statusBarHeight || 0
-	
-	// 计算滚动区域高度
-	const windowHeight = systemInfo.windowHeight
-	const tabBarHeight = 50 // 假设tabBar高度为50px
-	scrollViewHeight.value = windowHeight - statusBarHeight.value - tabBarHeight
-	
-	// 加载数据
-	loadMockData()
-	setupCountdown()
-	
-	// 模拟获取购物车数量和未读消息数
-	cartCount.value = Math.floor(Math.random() * 5) + 1
-})
-
-onUnmounted(() => {
-	// 清理定时器
-	if (countdownTimer.value !== null) {
-		clearInterval(countdownTimer.value)
-	}
-})
-
-// 加载Mock数据
-const loadMockData = () => {
-    bannerList.value = mockData.banners || []
-    categoryList.value = mockData.categories || []
-    flashSaleProducts.value = mockData.flashSaleProducts || []
-    productList.value = mockData.products || []
-}
-
-// 倒计时定时器
-const countdownTimer = ref<any>(null)
-const setupCountdown = () => {
-	countdownTimer.value = setInterval(() => {
-		let hours = parseInt(countdown.hours)
-		let minutes = parseInt(countdown.minutes)
-		let seconds = parseInt(countdown.seconds)
-		
-		seconds--
-		if (seconds < 0) {
-			seconds = 59
-			minutes--
-			if (minutes < 0) {
-				minutes = 59
-				hours--
-				if (hours < 0) {
-					// 重置倒计时
-					hours = 2
-					minutes = 30
-					seconds = 15
-				}
-			}
-		}
-		
-		countdown.hours = hours.toString().padStart(2, '0')
-		countdown.minutes = minutes.toString().padStart(2, '0')
-		countdown.seconds = seconds.toString().padStart(2, '0')
-	}, 1000)
-}
-
-// 事件处理函数
-const showCityPicker = () => {
-	uni.showActionSheet({
-		itemList: ['北京市', '上海市', '广州市', '深圳市', '其他城市'],
-		success: (res) => {
-			const cities = ['北京市', '上海市', '广州市', '深圳市', '其他城市']
-			currentCity.value = cities[res.tapIndex]
-		}
-	})
-}
-
-// 切换商品分类
-const switchCategory = (categoryId: string, index: number) => {
-	activeCategory.value = categoryId
-	
-	// 这里可以添加根据分类筛选商品的逻辑
-	console.log('切换到分类:', categoryId)
-	
-	// 滚动到选中的分类
-	const itemWidth = 80 // 每个分类项的宽度（包括margin）
-	scrollLeft.value = index * itemWidth
-}
-
-const switchSort = (sortId: string) => {
-	activeSort.value = sortId
-	// 这里可以添加根据排序方式筛选商品的逻辑
-}
-
-// 滚动事件
-const onScroll = (e: any) => {
-	scrollLeft.value = e.detail.scrollLeft
-}
-
-// 下拉刷新
-const onRefresh = () => {
-	refreshing.value = true
-	setTimeout(() => {
-		loadMockData()
-		refreshing.value = false
-		uni.showToast({
-			title: '刷新成功',
-			icon: 'success'
-		})
-	}, 1000)
-}
-
-// 上拉加载更多
-const loadMore = () => {
-	if (!loading.value && hasMore.value) {
-		loading.value = true
-		setTimeout(() => {
-			// 模拟加载更多数据
-			const newProducts = [...mockData.products].map((item, index) => ({
-				...item,
-				id: `300${index}`,
-				price: item.price + Math.floor(Math.random() * 100)
-			}))
-			productList.value = [...productList.value, ...newProducts]
-			loading.value = false
-			hasMore.value = productList.value.length < 20 // 假设最多显示20个商品
-		}, 1500)
-	}
-}
-
-// 导航函数 - 修改消息为跳转到消息tab页
-const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
-const navigateToCategory = (category?: any) => {
-	if (category) {
-		uni.navigateTo({ url: `/pages/mall/consumer/category?id=${category.id}&name=${category.name}` })
-	} else {
-		uni.switchTab({ url: '/pages/mall/consumer/category' })
-	}
-}
-const navigateToProduct = (product: any) => {
-	uni.navigateTo({ url: `/pages/mall/consumer/product-detail?id=${product.id}` })
-}
-const navigateToCoupons = () => uni.navigateTo({ url: '/pages/mall/consumer/coupons' })
-const navigateToMessages = () => uni.switchTab({ url: '/pages/mall/consumer/messages' })
-const navigateToFlashSale = () => uni.navigateTo({ url: '/pages/mall/consumer/flash-sale' })
-const navigateToBrand = () => uni.navigateTo({ url: '/pages/mall/consumer/brand' })
-const navigateToCart = () => uni.switchTab({ url: '/pages/mall/consumer/cart' })
-const navigateToDailyDeals = () => uni.navigateTo({ url: '/pages/mall/consumer/daily-deals' })
-const navigateToGroupBuy = () => uni.navigateTo({ url: '/pages/mall/consumer/group-buy' })
-</script>
-
-<style>
-/* 重置默认样式 - 确保不受全局样式影响 */
-.consumer-home * {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-.consumer-home {
-	width: 100%;
-	min-height: 100vh;
-	background: #f5f5f5;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-}
-
-/* 自定义导航栏 - 简化版 */
-.custom-navbar {
-	background: #ff5000;
-	width: 100%;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-}
-
-.nav-content {
-	height: 44px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 15px;
-	color: white;
-}
-
-.location {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	padding: 5px 10px;
-	background: rgba(255, 255, 255, 0.2);
-	border-radius: 15px;
-}
-
-.location-icon {
-	font-size: 14px;
-	margin-right: 4px;
-}
-
-.location-text {
-	font-size: 14px;
-	font-weight: bold;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 60px;
-}
-
-.location-arrow {
-	font-size: 10px;
-	margin-left: 4px;
-	color: rgba(255, 255, 255, 0.8);
-}
-
-.nav-icons {
-	display: flex;
-	align-items: center;
-	gap: 15px;
-}
-
-.icon-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 30px;
-	height: 30px;
-	position: relative;
-}
-
-.icon {
-	font-size: 20px;
-}
-
-.message-badge, .cart-badge {
-	position: absolute;
-	top: -5px;
-	right: -5px;
-	background: #ff3b30;
-	color: white;
-	font-size: 10px;
-	width: 16px;
-	height: 16px;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* 主内容区 */
-.main-content {
-	background: #f5f5f5;
-	margin-top: 44px;
-	width: 100%;
-}
-
-/* 商品分类区域 - 修复横向滚动 */
-.category-section {
-	background: white;
-	width: 100%;
-	padding: 15px 0;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-	margin-bottom: 5px;
-	position: relative;
-	overflow: hidden;
-}
-
-/* 商品分类横向滚动区域 */
-.category-scroll {
-	white-space: nowrap;
-	width: 100%;
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-	height: 90px;
-}
-
-.category-container {
-	display: flex;
-	flex-direction: row;
-	padding: 10px 15px;
-}
-
-.category-item {
-	flex-shrink: 0;
-	margin-right: 15px;
-	width: 70px;
-	height: 70px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	transition: all 0.3s ease;
-	position: relative;
-}
-
-.category-item.active .category-icon-wrapper {
-	background: #ff5000;
-	transform: scale(1.1);
-	box-shadow: 0 4px 12px rgba(255, 80, 0, 0.3);
-}
-
-.category-item.active .category-icon {
-	color: white;
-}
-
-.category-item.active .category-name {
-	color: #ff5000;
-	font-weight: bold;
-}
-
-/* 添加活动指示器 */
-.category-item.active::after {
-	content: '';
-	position: absolute;
-	bottom: 0;
-	left: 50%;
-	transform: translateX(-50%);
-	width: 20px;
-	height: 3px;
-	background: #ff5000;
-	border-radius: 2px;
-}
-
-.category-icon-wrapper {
-	width: 48px;
-	height: 48px;
-	border-radius: 24px;
-	background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-bottom: 6px;
-	transition: all 0.3s ease;
-}
-
-.category-icon {
-	font-size: 24px;
-	color: #666;
-	transition: all 0.3s ease;
-}
-
-.category-name {
-	font-size: 12px;
-	color: #333;
-	text-align: center;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 100%;
-	line-height: 1.2;
-	transition: all 0.3s ease;
-}
-
-/* 搜索栏 */
-.search-section {
-	background: white;
-	padding: 12px 15px;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.search-container {
-	width: 100%;
-}
-
-.search-box {
-	background: #f5f5f5;
-	border-radius: 25px;
-	padding: 12px 20px;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 45px;
-	border: 1px solid #eee;
-}
-
-.search-icon {
-	color: #999;
-	margin-right: 10px;
-	font-size: 18px;
-}
-
-.search-placeholder {
-	color: #999;
-	font-size: 15px;
-	flex: 1;
-}
-
-/* 轮播图区域 */
-.banner-section {
-	background: white;
-	width: 100%;
-	overflow: hidden;
-	margin-top: 5px;
-}
-
-.banner-swiper {
-	height: 200px;
-	width: 100%;
-}
-
-.banner-image {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-/* 快捷入口 - 横向排列 */
-.quick-actions {
-	background: white;
-	padding: 20px 0;
-	margin: 10px;
-	border-radius: 12px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-	width: calc(100% - 20px);
-}
-
-.action-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 20%;
-	flex-shrink: 0;
-}
-
-.action-icon {
-	width: 48px;
-	height: 48px;
-	border-radius: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 22px;
-	margin-bottom: 8px;
-}
-
-.action-icon.flash {
-	background: linear-gradient(135deg, #ff3b30, #ff9500);
-	color: white;
-}
-
-.action-icon.coupon {
-	background: linear-gradient(135deg, #34c759, #30d158);
-	color: white;
-}
-
-.action-icon.daily {
-	background: linear-gradient(135deg, #ff9500, #ffcc00);
-	color: white;
-}
-
-.action-icon.brand {
-	background: linear-gradient(135deg, #af52de, #ff2d55);
-	color: white;
-}
-
-.action-icon.group {
-	background: linear-gradient(135deg, #007aff, #5856d6);
-	color: white;
-}
-
-.action-text {
-	font-size: 13px;
-	color: #333;
-	font-weight: 500;
-	text-align: center;
-	width: 100%;
-}
-
-/* 限时秒杀 - 新版横向布局 */
-.flash-sale-section {
-	background: linear-gradient(135deg, #fff0e8, #ffece6);
-	margin: 10px;
-	border-radius: 12px;
-	padding: 18px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-	border: 1px solid #ffddd1;
-	width: calc(100% - 20px);
-}
-
-/* 限时秒杀头部 - 横向排列 */
-.section-header {
-	margin-bottom: 18px;
-	width: 100%;
-}
-
-.header-content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 15px;
-}
-
-.title-with-icon {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-}
-
-.flash-icon, .recommend-icon {
-	color: #ff5000;
-	font-size: 20px;
-}
-
-.section-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #ff5000;
-	white-space: nowrap;
-}
-
-/* 倒计时样式调整 - 横向排列 */
-.countdown-wrapper {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	background: #ff5000;
-	padding: 6px 12px;
-	border-radius: 6px;
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-
-.countdown-label {
-	font-size: 13px;
-	color: white;
-	font-weight: 500;
-}
-
-.time-box {
-	display: flex;
-	align-items: center;
-	gap: 3px;
-}
-
-.time {
-	background: white;
-	color: #ff5000;
-	padding: 4px 8px;
-	border-radius: 4px;
-	font-size: 14px;
-	min-width: 26px;
-	text-align: center;
-	font-weight: bold;
-}
-
-.colon {
-	color: white;
-	font-size: 14px;
-	font-weight: bold;
-}
-
-.more-link {
-	display: flex;
-	align-items: center;
-	color: #999;
-	font-size: 14px;
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-
-.more-link .arrow {
-	margin-left: 5px;
-	font-size: 18px;
-}
-
-/* 限时秒杀商品网格布局 */
-.flash-grid {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 12px;
-	width: 100%;
-}
-
-.flash-product {
-	background: white;
-	border-radius: 10px;
-	overflow: hidden;
-	border: 1px solid #ffddd1;
-	box-shadow: 0 3px 10px rgba(255, 80, 0, 0.12);
-	transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.flash-product:active {
-	transform: scale(0.98);
-	box-shadow: 0 2px 8px rgba(255, 80, 0, 0.2);
-}
-
-.product-image-wrapper {
-	position: relative;
-	width: 100%;
-	height: 0;
-	padding-bottom: 100%; /* 保持正方形 */
-	overflow: hidden;
-}
-
-.product-image {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-.product-tag {
-	position: absolute;
-	top: 8px;
-	left: 8px;
-	background: #ff5000;
-	color: white;
-	font-size: 11px;
-	padding: 3px 10px;
-	border-radius: 12px;
-	font-weight: bold;
-	z-index: 1;
-}
-
-.price-info {
-	padding: 12px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.flash-price {
-	color: #ff5000;
-	font-size: 18px;
-	font-weight: bold;
-	text-align: center;
-	width: 100%;
-}
-
-.original-price {
-	color: #999;
-	font-size: 13px;
-	text-decoration: line-through;
-	margin: 6px 0;
-	text-align: center;
-	width: 100%;
-}
-
-.progress-container {
-	width: 100%;
-	margin-top: 8px;
-}
-
-.progress-bar {
-	width: 100%;
-	height: 8px;
-	background: #ffece6;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.progress-inner {
-	height: 100%;
-	background: linear-gradient(90deg, #ff9500, #ff5000);
-	border-radius: 4px;
-}
-
-.sold-text {
-	font-size: 11px;
-	color: #ff5000;
-	text-align: center;
-	width: 100%;
-	margin-top: 4px;
-}
-
-/* 为你推荐 - 瀑布流布局 */
-.recommend-section {
-	background: white;
-	margin: 10px;
-	border-radius: 12px;
-	padding: 18px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-	width: calc(100% - 20px);
-}
-
-/* 为你推荐头部 */
-.recommend-section .section-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 18px;
-}
-
-/* 排序选项 - 横向排列 */
-.sort-options {
-	display: flex;
-	gap: 15px;
-	align-items: center;
-	flex-wrap: nowrap;
-	overflow-x: auto;
-	padding-bottom: 5px;
-}
-
-.sort-option {
-	font-size: 14px;
-	color: #666;
-	padding: 5px 0;
-	position: relative;
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-
-.sort-option.active {
-	color: #ff5000;
-	font-weight: bold;
-}
-
-.sort-option.active::after {
-	content: '';
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 2px;
-	background: #ff5000;
-	border-radius: 1px;
-}
-
-/* 瀑布流布局 */
-.waterfall-container {
-	display: flex;
-	justify-content: space-between;
-	gap: 12px;
-	width: 100%;
-	margin-top: 18px;
-}
-
-.waterfall-column {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.left-column {
-	margin-right: 6px;
-}
-
-.right-column {
-	margin-left: 6px;
-}
-
-.product-card {
-	background: white;
-	border-radius: 10px;
-	overflow: hidden;
-	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
-	width: 100%;
-}
-
-.product-image-wrapper {
-	position: relative;
-	width: 100%;
-	background: #f8f8f8;
-}
-
-.product-image {
-	width: 100%;
-	display: block;
-}
-
-.product-info {
-	padding: 15px;
-}
-
-.product-title {
-	font-size: 15px;
-	color: #333;
-	line-height: 1.4;
-	height: 42px;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	margin-bottom: 12px;
-	font-weight: 500;
-}
-
-.price-section {
-	display: flex;
-	align-items: baseline;
-	margin-bottom: 10px;
-}
-
-.current-price {
-	color: #ff5000;
-}
-
-.price-symbol {
-	font-size: 13px;
-}
-
-.price-value {
-	font-size: 20px;
-	font-weight: bold;
-}
-
-.original-price {
-	color: #999;
-	font-size: 13px;
-	text-decoration: line-through;
-	margin-left: 10px;
-}
-
-.product-meta {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	font-size: 13px;
-}
-
-.sales-count {
-	color: #999;
-}
-
-.shop-info {
-	display: flex;
-	align-items: center;
-}
-
-.shop-name {
-	color: #666;
-}
-
-/* 加载状态 */
-.loading-container {
-	padding: 30px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-}
-
-.loading-spinner {
-	width: 30px;
-	height: 30px;
-	border: 3px solid #f0f5ff;
-	border-top-color: #ff5000;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
-	margin-bottom: 10px;
-}
-
-@keyframes spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
-}
-
-.loading-text {
-	color: #999;
-	font-size: 14px;
-}
-
-.no-more {
-	text-align: center;
-	color: #999;
-	font-size: 13px;
-	padding: 30px 0;
-	border-top: 1px solid #f0f0f0;
-	margin-top: 10px;
-	width: 100%;
-}
-
-/* 安全区域 */
-.safe-area {
-	height: 20px;
-	width: 100%;
-}
-
-/* 为分类项添加点击反馈 */
-.category-item:active {
-	opacity: 0.7;
-	transform: scale(0.98);
-}
-
-/* 确保分类图标在点击时有更好的视觉效果 */
-.category-icon-wrapper:active {
-	transform: scale(0.95);
-}
-
-/* 响应式适配 */
-@media screen and (max-width: 320px) {
-	.category-item {
-		width: 65px;
-		margin-right: 12px;
-	}
-	
-	.flash-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 10px;
-	}
-	
-	/* 限时秒杀头部适配小屏幕 */
-	.header-content {
-		flex-wrap: wrap;
-		gap: 10px;
-	}
-	
-	.countdown-wrapper {
-		order: 3;
-		width: 100%;
-		justify-content: center;
-		margin-top: 5px;
-	}
-	
-	.more-link {
-		order: 2;
-	}
-	
-	.sort-options {
-		gap: 12px;
-		font-size: 13px;
-	}
-}
-
-@media screen and (min-width: 321px) and (max-width: 375px) {
-	.category-item {
-		width: 68px;
-		margin-right: 14px;
-	}
-	
-	.flash-grid {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 12px;
-	}
-	
-	.header-content {
-		flex-wrap: wrap;
-		gap: 10px;
-	}
-	
-	.countdown-wrapper {
-		order: 3;
-		width: 100%;
-		justify-content: center;
-		margin-top: 5px;
-	}
-	
-	.more-link {
-		order: 2;
-	}
-	
-	.sort-options {
-		gap: 15px;
-		font-size: 14px;
-	}
-}
-
-@media screen and (min-width: 376px) and (max-width: 414px) {
-	.category-item {
-		width: 72px;
-		margin-right: 15px;
-	}
-	
-	.flash-grid {
-		grid-template-columns: repeat(3, 1fr);
-		gap: 12px;
-	}
-	
-	.header-content {
-		flex-wrap: nowrap;
-		gap: 15px;
-	}
-	
-	.countdown-wrapper {
-		order: unset;
-		width: auto;
-		justify-content: flex-start;
-		margin-top: 0;
-	}
-	
-	.more-link {
-		order: unset;
-	}
-	
-	.sort-options {
-		gap: 18px;
-		font-size: 14px;
-	}
-}
-
-@media screen and (min-width: 415px) {
-	.category-item {
-		width: 75px;
-		margin-right: 18px;
-	}
-	
-	.flash-grid {
-		grid-template-columns: repeat(4, 1fr);
-		gap: 15px;
-	}
-	
-	.header-content {
-		flex-wrap: nowrap;
-		gap: 20px;
-	}
-	
-	.sort-options {
-		gap: 20px;
-		font-size: 14px;
-	}
-}
-
-/* 针对平板设备的适配 */
-@media screen and (min-width: 768px) {
-	.flash-grid {
-		grid-template-columns: repeat(5, 1fr);
-		gap: 16px;
-	}
-	
-	.flash-product {
-		border-radius: 12px;
-	}
-	
-	.product-image-wrapper {
-		padding-bottom: 100%;
-	}
-	
-	.sort-options {
-		gap: 25px;
-		font-size: 15px;
-	}
-}
-</style>
\ No newline at end of file
diff --git a/pages/mall/consumer/product-detail - 副本.uvue b/pages/mall/consumer/product-detail - 副本.uvue
new file mode 100644
index 00000000..500dd3ed
--- /dev/null
+++ b/pages/mall/consumer/product-detail - 副本.uvue	
@@ -0,0 +1,979 @@
+<!-- 消费者端 - 商品详情页 -->
+<template>
+  <view class="product-detail-page">
+    <!-- 商品图片轮播 -->
+    <view class="product-images">
+      <swiper class="image-swiper" :indicator-dots="true" :autoplay="false">
+        <swiper-item v-for="(image, index) in product.images" :key="index">
+          <image :src="image" class="product-image" mode="aspectFit" />
+        </swiper-item>
+      </swiper>
+      <view class="image-indicator">{{ currentImageIndex + 1 }} / {{ product.images.length }}</view>
+    </view>
+
+    <!-- 商品基本信息 -->
+    <view class="product-info">
+      <view class="price-section">
+        <text class="current-price">¥{{ product.price }}</text>
+        <text v-if="product.original_price" class="original-price">¥{{ product.original_price }}</text>
+      </view>
+      <text class="product-name">{{ product.name }}</text>
+      <text class="sales-info">已售{{ product.sales }}件 · 库存{{ product.stock }}件</text>
+    </view>
+
+    <!-- 店铺信息 -->
+    <view class="shop-info" @click="goToShop">
+      <image :src="merchant.shop_logo || '/static/default-shop.png'" class="shop-logo" />
+      <view class="shop-details">
+        <text class="shop-name" @click.stop="goToShop">{{ merchant.shop_name }}</text>
+        <view class="shop-stats-row">
+           <text class="rating-text">评分: {{ merchant.rating.toFixed(1) }}</text>
+           <text class="sales-text">销量: {{ merchant.total_sales }}</text>
+        </view>
+      </view>
+      <text class="enter-shop" @click.stop="goToShop">进店 ></text>
+    </view>
+
+    <!-- 规格选择 -->
+    <view class="spec-section" @click="showSpecModal">
+      <text class="spec-title">规格</text>
+      <text class="spec-selected">{{ selectedSpec || '请选择规格' }}</text>
+      <text class="spec-arrow">></text>
+    </view>
+
+    <!-- 数量选择 -->
+    <view class="quantity-section">
+      <text class="quantity-title">数量</text>
+      <view class="quantity-selector">
+        <view class="quantity-btn minus" @click="decreaseQuantity">
+          <text class="quantity-btn-text">-</text>
+        </view>
+        <input class="quantity-input" 
+               type="number" 
+               v-model="quantity" 
+               :min="1" 
+               :max="getMaxQuantity()"
+               @input="validateQuantity" />
+        <view class="quantity-btn plus" @click="increaseQuantity">
+          <text class="quantity-btn-text">+</text>
+        </view>
+      </view>
+      <text class="quantity-stock">库存{{ getAvailableStock() }}件</text>
+    </view>
+
+    <!-- 商品详情 -->
+    <view class="product-description">
+      <view class="section-title">商品详情</view>
+      <text class="description-text">{{ product.description || '暂无详细描述' }}</text>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-actions">
+      <view class="action-buttons">
+        <view class="action-btn" @click="goToCart">
+          <text class="action-icon">🛒</text>
+          <text class="action-text">购物车</text>
+        </view>
+        <view class="action-btn" @click="toggleFavorite">
+          <text class="action-icon">{{ isFavorite ? '❤️' : '🤍' }}</text>
+          <text class="action-text">{{ isFavorite ? '已收藏' : '收藏' }}</text>
+        </view>
+      </view>
+      <view class="btn-group">
+        <button class="cart-btn" @click="addToCart">加入购物车</button>
+        <button class="buy-btn" @click="buyNow">立即购买</button>
+      </view>
+    </view>
+
+    <!-- 规格选择弹窗 -->
+    <view v-if="showSpec" class="spec-modal" @click="hideSpecModal">
+      <view class="spec-content" @click.stop>
+        <view class="spec-header">
+          <text class="spec-title">选择规格</text>
+          <text class="close-btn" @click="hideSpecModal">×</text>
+        </view>
+        <view class="spec-list">
+          <view v-for="sku in productSkus" :key="sku.id" 
+                class="spec-item" 
+                :class="{ active: selectedSkuId === sku.id }"
+                @click="selectSku(sku)">
+            <text class="spec-name">{{ getSkuSpecText(sku) }}</text>
+            <text class="spec-price">¥{{ sku.price }}</text>
+            <text class="spec-stock">库存{{ sku.stock }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { ProductType, MerchantType, ProductSkuType } from '@/types/mall-types.uts'
+
+export default {
+  data() {
+    return {
+      product: {
+        id: '',
+        merchant_id: '',
+        category_id: '',
+        name: '',
+        description: '',
+        images: [] as Array<string>,
+        price: 0,
+        original_price: 0,
+        stock: 0,
+        sales: 0,
+        status: 0,
+        created_at: ''
+      } as ProductType,
+      merchant: {
+        id: '',
+        user_id: '',
+        shop_name: '',
+        shop_logo: '',
+        shop_banner: '',
+        shop_description: '',
+        contact_name: '',
+        contact_phone: '',
+        shop_status: 0,
+        rating: 0,
+        total_sales: 0,
+        created_at: ''
+      } as MerchantType,
+      productSkus: [] as Array<ProductSkuType>,
+      currentImageIndex: 0,
+      showSpec: false,
+      selectedSkuId: '',
+      selectedSpec: '',
+      quantity: 1,
+      isFavorite: false
+    }
+  },
+  onLoad(options: any) {
+    const productId = options.productId as string || options.id as string
+    const productPrice = options.price ? parseFloat(options.price) : null
+    const productOriginalPrice = options.originalPrice ? parseFloat(options.originalPrice) : null
+    
+    // 处理商品名称：如果是编码的则解码，否则直接使用
+    let productName = options.name as string
+    if (productName) {
+        try {
+            // 尝试解码，如果失败（不是有效的URI组件）则使用原值
+            productName = decodeURIComponent(productName)
+        } catch (e) {
+            console.warn('ProductName decode failed, using original:', productName)
+        }
+    }
+    
+    let productImage = options.image as string
+    if (productImage) {
+        try {
+            productImage = decodeURIComponent(productImage)
+        } catch (e) {
+            console.warn('ProductImage decode failed, using original:', productImage)
+        }
+    }
+    
+    if (productId) {
+      this.loadProductDetail(productId, {
+        price: productPrice,
+        originalPrice: productOriginalPrice,
+        name: productName,
+        image: productImage
+      })
+      this.checkFavoriteStatus(productId)
+      this.saveFootprint(productId)
+      
+      // 设置导航栏标题为商品名称
+      if (productName) {
+          uni.setNavigationBarTitle({
+              title: productName
+          })
+      }
+    }
+  },
+  computed: {
+    displayPrice(): number {
+      if (this.selectedSkuId) {
+        const sku = this.productSkus.find(s => s.id === this.selectedSkuId)
+        if (sku) return sku.price
+      }
+      return this.product.price
+    }
+  },
+  methods: {
+    saveFootprint(productId: string) {
+      const footprintData = uni.getStorageSync('footprints')
+      let footprints: any[] = []
+      
+      if (footprintData) {
+        try {
+          footprints = JSON.parse(footprintData as string) as any[]
+        } catch (e) {
+          console.error('Failed to parse footprints', e)
+        }
+      }
+      
+      // 移除已存在的相同商品（为了将其移到最新位置）
+      footprints = footprints.filter(item => item.id !== productId)
+      
+      // 添加到头部
+      footprints.unshift({
+        id: this.product.id,
+        name: this.product.name,
+        price: this.product.price,
+        original_price: this.product.original_price, // 添加原价
+        image: this.product.images[0],
+        sales: this.product.sales,
+        shopId: this.merchant.id,
+        shopName: this.merchant.shop_name,
+        viewTime: Date.now()
+      })
+      
+      // 限制数量，例如最近50条
+      if (footprints.length > 50) {
+        footprints = footprints.slice(0, 50)
+      }
+      uni.setStorageSync('footprints', JSON.stringify(footprints))
+    },
+    
+    loadProductDetail(productId: string, options: any = {}) {
+      // 根据商品ID生成一个基础价格（如果没有传入价格）
+      const generatePriceFromId = (id: string): number => {
+        // 简单哈希函数，将字符串转换为一个在50-500之间的价格
+        let hash = 0
+        for (let i = 0; i < id.length; i++) {
+          hash = (hash << 5) - hash + id.charCodeAt(i)
+          hash |= 0 // 转换为32位整数
+        }
+        // 将哈希值映射到50-500之间
+        const price = 50 + Math.abs(hash % 450)
+        // 保留两位小数
+        return parseFloat(price.toFixed(2))
+      }
+
+      // 优先使用传入的参数，否则根据商品ID生成价格
+      const basePrice = options.price ? parseFloat(options.price) : generatePriceFromId(productId)
+      // 原价比现价高20%左右
+      const originalPrice = options.originalPrice ? parseFloat(options.originalPrice) : parseFloat((basePrice * 1.2).toFixed(2))
+      
+      // 优先使用传入的商品名称，否则根据商品ID生成名称
+      const productName = options.name ? decodeURIComponent(options.name) : (() => {
+        // 如果options.name未传入，使用默认的商品名称生成逻辑
+        const productNames = [
+          '高品质运动休闲鞋',
+          '时尚简约双肩背包',
+          '多功能智能手环',
+          '便携式蓝牙音箱',
+          '全自动雨伞',
+          '抗菌防螨床上四件套',
+          '不锈钢保温杯',
+          '无线充电器',
+          '高清行车记录仪',
+          '智能体脂秤'
+        ]
+        const nameIndex = Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % productNames.length
+        return productNames[nameIndex]
+      })()
+      
+      // 优先使用传入的图片，否则使用默认图片
+      const productImage = options.image ? decodeURIComponent(options.image) : '/static/product1.jpg'
+      
+      // 模拟销量和库存，使其更真实
+      const sales = 1000 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5000
+      const stock = 50 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 200
+      
+      this.product = {
+        id: productId,
+        merchant_id: 'merchant_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5 + 1).toString().padStart(3, '0'),
+        category_id: 'cat_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 10 + 1).toString().padStart(3, '0'),
+        name: productName,
+        description: '这是一个高品质的商品，具有优秀的性能和优美的外观设计。采用环保材料，经过严格质检，保证用户的使用体验。',
+        images: [
+          productImage,
+          '/static/product2.jpg',
+          '/static/product3.jpg'
+        ],
+        price: basePrice,
+        original_price: originalPrice,
+        stock: stock,
+        sales: sales,
+        status: 1,
+        created_at: '2024-01-15'
+      }
+      
+      // 根据商家ID生成不同的商家信息
+      const merchantIndex = Math.abs(this.product.merchant_id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5
+      const shopNames = ['优质好店', '品牌直营店', '官方旗舰店', '专卖店', '精品小店']
+      const shopDescriptions = [
+        '专注品质生活',
+        '品牌官方直营，正品保障',
+        '厂家直销，价格优惠',
+        '专注本领域十年老店',
+        '用心服务每一位顾客'
+      ]
+      const contactNames = ['店主小王', '店长小李', '经理小张', '客服小赵', '老板小钱']
+      
+      this.merchant = {
+        id: this.product.merchant_id,
+        user_id: 'user_' + (merchantIndex + 1).toString().padStart(3, '0'),
+        shop_name: shopNames[merchantIndex],
+        shop_logo: '/static/shop-logo.png',
+        shop_banner: '/static/shop-banner.png',
+        shop_description: shopDescriptions[merchantIndex],
+        contact_name: contactNames[merchantIndex],
+        contact_phone: '138' + (10000000 + merchantIndex * 1111111).toString().substring(0, 8),
+        shop_status: 1,
+        rating: 4.5 + (merchantIndex * 0.1),
+        total_sales: 10000 + merchantIndex * 5000,
+        created_at: '2023-06-01'
+      }
+      
+      this.loadProductSkus(productId)
+    },
+    
+    loadProductSkus(productId: string) {
+      // 模拟加载商品SKU数据
+      const basePrice = this.product.price
+      
+      // 使用 productId 作为前缀生成唯一的 SKU ID，防止不同商品的 SKU ID 冲突
+      this.productSkus = [
+        {
+          id: `${productId}_sku_001`,
+          product_id: productId,
+          sku_code: 'SKU001',
+          specifications: { color: '红色', size: 'M' },
+          price: basePrice,
+          stock: 50,
+          image_url: '/static/sku1.jpg',
+          status: 1
+        },
+        {
+          id: `${productId}_sku_002`,
+          product_id: productId,
+          sku_code: 'SKU002',
+          specifications: { color: '蓝色', size: 'L' },
+          price: parseFloat((basePrice * 1.1).toFixed(2)),
+          stock: 30,
+          image_url: '/static/sku2.jpg',
+          status: 1
+        }
+      ]
+    },
+    
+    showSpecModal() {
+      this.showSpec = true
+    },
+    
+    hideSpecModal() {
+      this.showSpec = false
+    },
+    
+    selectSku(sku: ProductSkuType) {
+      this.selectedSkuId = sku.id
+      this.selectedSpec = this.getSkuSpecText(sku)
+      this.hideSpecModal()
+    },
+    
+    getSkuSpecText(sku: ProductSkuType): string {
+      if (sku.specifications) {
+        const specs: any = sku.specifications
+        return Object.keys(specs).map(key => `${key}: ${specs[key]}`).join(', ')
+      }
+      return sku.sku_code
+    },
+    
+    addToCart() {
+      if (!this.selectedSkuId) {
+        uni.showToast({
+          title: '请选择规格',
+          icon: 'none'
+        })
+        return
+      }
+      
+      // 获取现有购物车数据
+      const cartData = uni.getStorageSync('cart')
+      let cartItems: any[] = []
+      
+      if (cartData) {
+        try {
+          cartItems = JSON.parse(cartData as string) as any[]
+        } catch (e) {
+          console.error('解析购物车数据失败', e)
+        }
+      }
+      
+      // 检查商品是否已存在 (同一SKU)
+      const existingItem = cartItems.find((item: any) => item.id === this.selectedSkuId)
+      
+      if (existingItem) {
+        existingItem.quantity += this.quantity
+      } else {
+        // 查找SKU信息
+        const sku = this.productSkus.find(s => s.id === this.selectedSkuId)
+        
+        // 添加新商品
+        cartItems.push({
+          id: this.selectedSkuId, // 使用SKU ID作为购物车条目ID
+          productId: this.product.id,
+          shopId: this.merchant.id,
+          shopName: this.merchant.shop_name,
+          name: this.product.name,
+          price: sku ? sku.price : this.product.price,
+          image: (sku && sku.image_url) ? sku.image_url : this.product.images[0],
+          spec: this.selectedSpec,
+          quantity: this.quantity,
+          selected: true
+        })
+      }
+      
+      // 保存回存储
+      uni.setStorageSync('cart', JSON.stringify(cartItems))
+      
+      // 模拟添加到购物车
+      uni.showToast({
+        title: '已添加到购物车',
+        icon: 'success'
+      })
+    },
+    
+    buyNow() {
+      if (!this.selectedSkuId) {
+        uni.showToast({
+          title: '请选择规格',
+          icon: 'none'
+        })
+        return
+      }
+      
+      const sku = this.productSkus.find(s => s.id === this.selectedSkuId)
+      
+	// 调试：打印价格信息
+	console.log('立即购买 - 商品价格信息:')
+	console.log('SKU价格:', sku ? sku.price : '无SKU')
+	console.log('商品价格:', this.product.price)
+	console.log('选择的价格:', (sku ? sku.price : this.product.price))
+	console.log('数量:', this.quantity)
+	
+	const selectedItem = {
+		id: this.selectedSkuId,
+		product_id: this.product.id,
+		sku_id: this.selectedSkuId,
+		product_name: this.product.name,
+		product_image: (sku && sku.image_url) ? sku.image_url : this.product.images[0],
+		sku_specifications: sku ? sku.specifications : {},
+		price: Number(parseFloat((sku ? sku.price : this.product.price).toString()).toFixed(2)),
+		quantity: Number(this.quantity)
+	}
+	
+	// 调试：打印最终传递的数据
+	console.log('立即购买 - 传递的商品数据:', selectedItem)
+
+      // 使用Storage传递数据，避免EventChannel可能的问题
+      uni.setStorageSync('checkout_type', 'buy_now')
+      uni.setStorageSync('checkout_items', JSON.stringify([selectedItem]))
+
+      // 跳转到订单确认页
+      uni.navigateTo({
+        url: '/pages/mall/consumer/checkout',
+        success: (res) => {
+            res.eventChannel.emit('acceptData', {
+                selectedItems: [selectedItem]
+            })
+        }
+      })
+    },
+    
+    goToShop() {
+      uni.navigateTo({
+        url: `/pages/mall/consumer/shop-detail?merchantId=${this.merchant.id}`
+      })
+    },
+
+    checkFavoriteStatus(id: string) {
+      const storedFavorites = uni.getStorageSync('favorites')
+      if (storedFavorites) {
+        try {
+          const favorites = JSON.parse(storedFavorites as string) as any[]
+          this.isFavorite = favorites.some(item => item.id === id)
+        } catch (e) {
+          console.error('Failed to parse favorites', e)
+        }
+      }
+    },
+
+    toggleFavorite() {
+      const storedFavorites = uni.getStorageSync('favorites')
+      let favorites: any[] = []
+      
+      if (storedFavorites) {
+        try {
+          favorites = JSON.parse(storedFavorites as string) as any[]
+        } catch (e) {
+          console.error('Failed to parse favorites', e)
+        }
+      }
+      
+      if (this.isFavorite) {
+        // 取消收藏
+        favorites = favorites.filter(item => item.id !== this.product.id)
+        uni.showToast({
+          title: '已取消收藏',
+          icon: 'none'
+        })
+      } else {
+        // 添加收藏
+        favorites.push({
+          id: this.product.id,
+          name: this.product.name,
+          price: this.product.price,
+          original_price: this.product.original_price, // 保存原价
+          image: this.product.images[0],
+          sales: this.product.sales,
+          shopId: this.merchant.id,
+          shopName: this.merchant.shop_name
+        })
+        uni.showToast({
+          title: '收藏成功',
+          icon: 'success'
+        })
+      }
+      
+      uni.setStorageSync('favorites', JSON.stringify(favorites))
+      this.isFavorite = !this.isFavorite
+    },
+
+    goToHome() {
+      uni.switchTab({
+        url: '/pages/mall/consumer/home'
+      })
+    },
+
+    goToCart() {
+      uni.switchTab({
+        url: '/pages/mall/consumer/cart'
+      })
+    },
+
+    // 数量选择相关方法
+    decreaseQuantity() {
+      if (this.quantity > 1) {
+        this.quantity--
+      }
+    },
+    
+    increaseQuantity() {
+      const maxQuantity = this.getMaxQuantity()
+      if (this.quantity < maxQuantity) {
+        this.quantity++
+      } else {
+        uni.showToast({
+          title: `最多只能购买${maxQuantity}件`,
+          icon: 'none'
+        })
+      }
+    },
+    
+    validateQuantity() {
+      // 确保数量是数字
+      let num = parseInt(this.quantity)
+      if (isNaN(num)) {
+        num = 1
+      }
+      
+      // 限制在1和最大库存之间
+      const maxQuantity = this.getMaxQuantity()
+      if (num < 1) {
+        num = 1
+      } else if (num > maxQuantity) {
+        num = maxQuantity
+        uni.showToast({
+          title: `最多只能购买${maxQuantity}件`,
+          icon: 'none'
+        })
+      }
+      
+      this.quantity = num
+    },
+    
+    getMaxQuantity() {
+      // 如果有选择SKU，使用SKU的库存，否则使用商品总库存
+      if (this.selectedSkuId) {
+        const sku = this.productSkus.find(s => s.id === this.selectedSkuId)
+        if (sku) return sku.stock
+      }
+      return this.product.stock
+    },
+    
+    getAvailableStock() {
+      return this.getMaxQuantity()
+    }
+  }
+}
+</script>
+
+<style>
+.product-detail-page {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 120rpx;
+}
+
+.product-images {
+  position: relative;
+  height: 750rpx;
+  background-color: #fff;
+}
+
+.image-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-indicator {
+  position: absolute;
+  bottom: 20rpx;
+  right: 20rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  padding: 10rpx 20rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+}
+
+.product-info {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.price-section {
+  margin-bottom: 20rpx;
+}
+
+.current-price {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #ff4444;
+  margin-right: 20rpx;
+}
+
+.original-price {
+  font-size: 28rpx;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.product-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 15rpx;
+}
+
+.sales-info {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.shop-info {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: row; /* 显式横向排列 */
+  align-items: center;
+}
+
+.shop-logo {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 10rpx;
+  margin-right: 20rpx;
+}
+
+.shop-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column; /* 内部信息保持纵向，或者根据需要改为横向 */
+  justify-content: center;
+}
+
+.shop-name {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.shop-stats-row {
+  display: flex;
+  flex-direction: row; /* 显式横向排列 */
+  align-items: center;
+}
+
+.rating-text, .sales-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-right: 30rpx;
+}
+
+.enter-shop {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.spec-section {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+}
+
+.spec-title {
+  font-size: 30rpx;
+  color: #333;
+  width: 120rpx;
+}
+
+.spec-selected {
+  flex: 1;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.spec-arrow {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.quantity-section {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.quantity-title {
+  font-size: 30rpx;
+  color: #333;
+  width: 120rpx;
+}
+
+.quantity-selector {
+  display: flex;
+  align-items: center;
+  border: 1rpx solid #e5e5e5;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.quantity-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.quantity-btn.minus {
+  border-right: 1rpx solid #e5e5e5;
+}
+
+.quantity-btn.plus {
+  border-left: 1rpx solid #e5e5e5;
+}
+
+.quantity-btn-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.quantity-input {
+  width: 80rpx;
+  height: 60rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #333;
+  border: none;
+  background-color: #fff;
+}
+
+.quantity-stock {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.product-description {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.description-text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 10rpx 20rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: row; /* 显式设置横向排列 */
+  align-items: center;
+  justify-content: space-between;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: row; /* 显式设置横向排列 */
+  align-items: center;
+  margin-right: 20rpx;
+}
+
+.action-btn {
+  display: flex;
+  flex-direction: column; /* 图标文字保持纵向 */
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  min-width: 80rpx;
+}
+
+.action-icon {
+  font-size: 40rpx;
+  margin-bottom: 4rpx;
+}
+
+.action-text {
+  font-size: 20rpx;
+  color: #666;
+}
+
+.btn-group {
+  flex: 1;
+  display: flex;
+  flex-direction: row; /* 显式设置横向排列 */
+  align-items: center;
+}
+
+.cart-btn, .buy-btn {
+  flex: 1;
+  height: 72rpx;
+  line-height: 72rpx;
+  border-radius: 36rpx;
+  font-size: 26rpx;
+  border: none;
+  margin: 0 10rpx;
+}
+
+.cart-btn {
+  background-color: #ffa726;
+  color: #fff;
+}
+
+.buy-btn {
+  background-color: #ff4444;
+  color: #fff;
+}
+
+.spec-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 999;
+}
+
+.spec-content {
+  background-color: #fff;
+  width: 100%;
+  max-height: 80vh;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 30rpx;
+}
+
+.spec-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.spec-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.close-btn {
+  font-size: 48rpx;
+  color: #999;
+}
+
+.spec-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.spec-item {
+  display: flex;
+  align-items: center;
+  padding: 25rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.spec-item.active {
+  background-color: #fff3e0;
+}
+
+.spec-name {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.spec-price {
+  font-size: 26rpx;
+  color: #ff4444;
+  margin-right: 20rpx;
+}
+
+.spec-stock {
+  font-size: 24rpx;
+  color: #666;
+  width: 100rpx;
+  text-align: right;
+}
+</style>
diff --git a/pages/mall/consumer/product-detail.uvue b/pages/mall/consumer/product-detail.uvue
index 500dd3ed..27e3757e 100644
--- a/pages/mall/consumer/product-detail.uvue
+++ b/pages/mall/consumer/product-detail.uvue
@@ -109,6 +109,7 @@
 
 <script>
 import { ProductType, MerchantType, ProductSkuType } from '@/types/mall-types.uts'
+import { supabaseService } from '@/utils/supabaseService.uts'
 
 export default {
   data() {
@@ -238,69 +239,85 @@ export default {
       uni.setStorageSync('footprints', JSON.stringify(footprints))
     },
     
-    loadProductDetail(productId: string, options: any = {}) {
-      // 根据商品ID生成一个基础价格（如果没有传入价格）
-      const generatePriceFromId = (id: string): number => {
-        // 简单哈希函数，将字符串转换为一个在50-500之间的价格
-        let hash = 0
-        for (let i = 0; i < id.length; i++) {
-          hash = (hash << 5) - hash + id.charCodeAt(i)
-          hash |= 0 // 转换为32位整数
-        }
-        // 将哈希值映射到50-500之间
-        const price = 50 + Math.abs(hash % 450)
-        // 保留两位小数
-        return parseFloat(price.toFixed(2))
+    async loadProductDetail(productId: string, options: any = {}) {
+      // 尝试从数据库加载
+      let dbProduct = null
+      try {
+        console.log('正在尝试从数据库加载商品详情:', productId)
+        dbProduct = await supabaseService.getProductById(productId)
+        console.log('数据库返回的商品详情:', dbProduct)
+      } catch (e) {
+        console.error('Failed to load product from DB', e)
       }
 
-      // 优先使用传入的参数，否则根据商品ID生成价格
-      const basePrice = options.price ? parseFloat(options.price) : generatePriceFromId(productId)
-      // 原价比现价高20%左右
-      const originalPrice = options.originalPrice ? parseFloat(options.originalPrice) : parseFloat((basePrice * 1.2).toFixed(2))
-      
-      // 优先使用传入的商品名称，否则根据商品ID生成名称
-      const productName = options.name ? decodeURIComponent(options.name) : (() => {
-        // 如果options.name未传入，使用默认的商品名称生成逻辑
-        const productNames = [
-          '高品质运动休闲鞋',
-          '时尚简约双肩背包',
-          '多功能智能手环',
-          '便携式蓝牙音箱',
-          '全自动雨伞',
-          '抗菌防螨床上四件套',
-          '不锈钢保温杯',
-          '无线充电器',
-          '高清行车记录仪',
-          '智能体脂秤'
-        ]
-        const nameIndex = Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % productNames.length
-        return productNames[nameIndex]
-      })()
-      
-      // 优先使用传入的图片，否则使用默认图片
-      const productImage = options.image ? decodeURIComponent(options.image) : '/static/product1.jpg'
-      
-      // 模拟销量和库存，使其更真实
-      const sales = 1000 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5000
-      const stock = 50 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 200
-      
-      this.product = {
-        id: productId,
-        merchant_id: 'merchant_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5 + 1).toString().padStart(3, '0'),
-        category_id: 'cat_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 10 + 1).toString().padStart(3, '0'),
-        name: productName,
-        description: '这是一个高品质的商品，具有优秀的性能和优美的外观设计。采用环保材料，经过严格质检，保证用户的使用体验。',
-        images: [
-          productImage,
-          '/static/product2.jpg',
-          '/static/product3.jpg'
-        ],
-        price: basePrice,
-        original_price: originalPrice,
-        stock: stock,
-        sales: sales,
-        status: 1,
-        created_at: '2024-01-15'
+      if (dbProduct) {
+        console.log('使用数据库数据渲染页面')
+        // 使用数据库数据
+        const images = [] as Array<string>
+        if (dbProduct.image) images.push(dbProduct.image)
+        else if (options.image) images.push(decodeURIComponent(options.image as string))
+        else images.push('/static/product1.jpg')
+        
+        // 补充模拟图片
+        images.push('/static/product2.jpg')
+        images.push('/static/product3.jpg')
+
+        this.product = {
+            id: dbProduct.id,
+            merchant_id: dbProduct.shop_id || 'merchant_001',
+            category_id: dbProduct.category_id,
+            name: dbProduct.name,
+            description: dbProduct.description || '这是一个高品质的商品，具有优秀的性能和优美的外观设计。采用环保材料，经过严格质检，保证用户的使用体验。',
+            images: images,
+            price: dbProduct.price,
+            original_price: dbProduct.original_price || null,
+            stock: dbProduct.stock !== undefined ? dbProduct.stock : 0, // 确保使用数据库中的库存
+            sales: dbProduct.sales !== undefined ? dbProduct.sales : 0, // 确保使用数据库中的销量
+            status: 1,
+            created_at: dbProduct.created_at || '2024-01-01'
+        } as ProductType
+        console.log('页面 product 对象已更新:', this.product)
+      } else {
+        console.log('数据库无数据或加载失败，使用模拟数据')
+        // 数据库无数据时，使用原有模拟逻辑
+        const generatePriceFromId = (id: string): number => {
+            let hash = 0
+            for (let i = 0; i < id.length; i++) {
+            hash = (hash << 5) - hash + id.charCodeAt(i)
+            hash |= 0
+            }
+            const price = 50 + Math.abs(hash % 450)
+            return parseFloat(price.toFixed(2))
+        }
+
+        const basePrice = options.price ? parseFloat(options.price) : generatePriceFromId(productId)
+        const originalPrice = options.originalPrice ? parseFloat(options.originalPrice) : parseFloat((basePrice * 1.2).toFixed(2))
+        
+        const productName = options.name ? decodeURIComponent(options.name) : (() => {
+            const productNames = ['高品质运动休闲鞋', '时尚简约双肩背包', '多功能智能手环', '便携式蓝牙音箱', '全自动雨伞', '抗菌防螨床上四件套', '不锈钢保温杯', '无线充电器', '高清行车记录仪', '智能体脂秤']
+            const nameIndex = Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % productNames.length
+            return productNames[nameIndex]
+        })()
+        
+        const productImage = options.image ? decodeURIComponent(options.image) : '/static/product1.jpg'
+        
+        const sales = 1000 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5000
+        const stock = 50 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 200
+        
+        this.product = {
+            id: productId,
+            merchant_id: 'merchant_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5 + 1).toString().padStart(3, '0'),
+            category_id: 'cat_' + (Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 10 + 1).toString().padStart(3, '0'),
+            name: productName,
+            description: '这是一个高品质的商品，具有优秀的性能和优美的外观设计。采用环保材料，经过严格质检，保证用户的使用体验。',
+            images: [productImage, '/static/product2.jpg', '/static/product3.jpg'],
+            price: basePrice,
+            original_price: originalPrice,
+            stock: stock,
+            sales: sales,
+            status: 1,
+            created_at: '2024-01-15'
+        }
       }
       
       // 根据商家ID生成不同的商家信息
diff --git a/pages/mall/consumer/search.uvue b/pages/mall/consumer/search.uvue
index ddf5d0f4..8eda932b 100644
--- a/pages/mall/consumer/search.uvue
+++ b/pages/mall/consumer/search.uvue
@@ -229,6 +229,8 @@
 
 <script setup lang="uts">
 import { ref, reactive, onMounted, computed } from 'vue'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Product } from '@/utils/supabaseService.uts'
 
 // 状态定义
 const statusBarHeight = ref(0)
@@ -437,36 +439,48 @@ const selectSuggestion = (suggestion: string) => {
 	performSearch()
 }
 
+const currentPage = ref(1)
+
 const performSearch = () => {
 	// 再次强制设置状态，确保万无一失
 	showResults.value = true
 	loading.value = true
-	// 注意：这里不要清空 searchResults.value = []，否则如果 loading 状态切换有微小延迟，可能会短暂满足 "无数据且非加载" 的条件
+	// 重置页码
+	currentPage.value = 1
 	// 保持旧数据直到新数据回来，或者依靠 loading 状态完全遮罩
 	
-	// 模拟搜索请求
-	setTimeout(() => {
-		// 生成模拟结果
-		const newResults = Array.from({ length: 6 }, (_, i) => ({
-			id: `s${Date.now()}${i}`, // 确保ID唯一
-			shopId: i % 2 === 0 ? 'shop_self' : `shop_${i}_${Date.now()}`,
-			shopName: i % 2 === 0 ? '平台自营大药房' : '阿里健康大药房',
-			name: `${searchKeyword.value}相关药品-${i+1}`,
-			specification: '10g*12袋',
-			price: (Math.random() * 50 + 10).toFixed(1),
-			image: '/static/images/default-product.png', // 使用本地默认图片
-			sales: Math.floor(Math.random() * 1000),
-			tag: i % 2 === 0 ? '自营' : ''
-		}))
-		
-		// 数据准备好后再关闭 loading，确保无缝衔接
-		searchResults.value = newResults
-		// 应用当前排序
-		sortResults()
-		
+	// 使用 Supabase 搜索真实数据
+	const keyword = searchKeyword.value.trim()
+	if (!keyword) {
 		loading.value = false
-		hasMore.value = true
-	}, 800)
+		return
+	}
+	
+	// 确定排序方式
+	let sortBy = 'sales'
+	let ascending = false
+	if (activeSort.value === 'price') {
+		sortBy = 'price'
+		ascending = priceSortAsc.value
+	}
+	
+	supabaseService.searchProducts(keyword, currentPage.value, 20, sortBy, ascending)
+		.then((response) => {
+			searchResults.value = response.data as any[]
+			hasMore.value = response.hasmore
+			loading.value = false
+			
+			// 如果无结果，显示空状态
+			if (searchResults.value.length === 0) {
+				// empty-result 组件会自动显示
+			}
+		})
+		.catch((error) => {
+			console.error('搜索失败:', error)
+			loading.value = false
+			// 可以显示错误提示，但为了用户体验，先不显示
+			// 保持搜索结果为空，让empty-result显示
+		})
 }
 
 // 切换排序
@@ -481,48 +495,38 @@ const switchSort = (type: string) => {
 	} else {
 		activeSort.value = type
 	}
-	sortResults()
-}
-
-// 执行排序逻辑
-const sortResults = () => {
-	const list = [...searchResults.value]
-	if (activeSort.value === 'sales') {
-		// 销量降序
-		list.sort((a, b) => b.sales - a.sales)
-	} else if (activeSort.value === 'price') {
-		// 价格排序
-		list.sort((a, b) => {
-			const p1 = parseFloat(a.price)
-			const p2 = parseFloat(b.price)
-			return priceSortAsc.value ? (p1 - p2) : (p2 - p1)
-		})
-	} else {
-		// 综合排序（这里简单按ID倒序模拟）
-		list.sort((a, b) => (a.id > b.id ? -1 : 1))
-	}
-	searchResults.value = list
+	// 重新执行搜索以获取正确排序的数据
+	performSearch()
 }
 
 const loadMore = () => {
-	if (loading.value || !hasMore.value) return
+	if (loading.value || !hasMore.value || !searchKeyword.value.trim()) return
 	loading.value = true
-	setTimeout(() => {
-		const newItems = Array.from({ length: 4 }, (_, i) => ({
-			id: `more${Date.now()}${i}`,
-			shopId: i % 2 === 0 ? 'shop_self' : `shop_more_${i}_${Date.now()}`,
-			shopName: i % 2 === 0 ? '平台自营大药房' : '好药师大药房',
-			name: `${searchKeyword.value}更多药品-${i+1}`,
-			specification: '盒装',
-			price: (Math.random() * 50 + 10).toFixed(1),
-			image: '/static/images/default-product.png',
-			sales: Math.floor(Math.random() * 500),
-			tag: ''
-		}))
-		searchResults.value.push(...newItems)
-		loading.value = false
-		if (searchResults.value.length > 20) hasMore.value = false
-	}, 1000)
+	
+	// 增加页码
+	currentPage.value++
+	
+	const keyword = searchKeyword.value.trim()
+	// 确定排序方式
+	let sortBy = 'sales'
+	let ascending = false
+	if (activeSort.value === 'price') {
+		sortBy = 'price'
+		ascending = priceSortAsc.value
+	}
+	
+	supabaseService.searchProducts(keyword, currentPage.value, 20, sortBy, ascending)
+		.then((response) => {
+			searchResults.value.push(...(response.data as any[]))
+			hasMore.value = response.hasmore
+			loading.value = false
+		})
+		.catch((error) => {
+			console.error('加载更多失败:', error)
+			loading.value = false
+			// 加载失败时，假设没有更多数据
+			hasMore.value = false
+		})
 }
 
 const refreshGuessList = () => {
@@ -537,7 +541,7 @@ const viewProductDetail = (item: any) => {
 	// 跳转详情页逻辑
 	console.log('查看商品', item)
 	uni.navigateTo({
-		url: `/pages/mall/consumer/product-detail?productId=${item.id}&price=${item.price}&originalPrice=${item.originalPrice || ''}`
+		url: `/pages/mall/consumer/product-detail?productId=${item.id}&price=${item.price}&originalPrice=${item.original_price || ''}&name=${encodeURIComponent(item.name)}&image=${encodeURIComponent(item.image)}`
 	})
 }
 
@@ -1230,4 +1234,4 @@ const goBack = () => {
 .safe-area {
 	height: 20px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/mall/consumer/wallet.uvue b/pages/mall/consumer/wallet.uvue
index 7f4e8d97..3dfb25d8 100644
--- a/pages/mall/consumer/wallet.uvue
+++ b/pages/mall/consumer/wallet.uvue
@@ -637,6 +637,7 @@ const goBack = () => {
 
 .balance-actions {
 	display: flex;
+	flex-direction: row;
 	gap: 20px;
 }
 
@@ -664,6 +665,7 @@ const goBack = () => {
 	background-color: #ffffff;
 	padding: 20px;
 	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
@@ -695,13 +697,16 @@ const goBack = () => {
 
 .action-grid {
 	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
+	align-items: center;
 }
 
 .action-item {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	flex: 1;
 }
 
 .action-icon {
@@ -722,6 +727,7 @@ const goBack = () => {
 
 .section-header {
 	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 15px;
@@ -735,6 +741,7 @@ const goBack = () => {
 
 .filter-tabs {
 	display: flex;
+	flex-direction: row;
 	gap: 15px;
 }
 
@@ -791,6 +798,7 @@ const goBack = () => {
 
 .transaction-item {
 	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
 	align-items: flex-start;
 	padding: 15px 0;
@@ -803,6 +811,7 @@ const goBack = () => {
 
 .transaction-left {
 	display: flex;
+	flex-direction: row;
 	align-items: flex-start;
 }
 
@@ -928,6 +937,7 @@ const goBack = () => {
 
 .popup-header {
 	display: flex;
+	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 20px;
@@ -960,6 +970,7 @@ const goBack = () => {
 
 .amount-input {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	margin-bottom: 20px;
 	padding: 10px;
@@ -982,6 +993,7 @@ const goBack = () => {
 
 .quick-amounts {
 	display: flex;
+	flex-direction: row;
 	flex-wrap: wrap;
 	gap: 10px;
 	margin-bottom: 15px;
@@ -1009,6 +1021,7 @@ const goBack = () => {
 
 .popup-footer {
 	display: flex;
+	flex-direction: row;
 	gap: 15px;
 }
 
diff --git a/pages/user/login.uvue b/pages/user/login.uvue
index ff80071c..3ec108f1 100644
--- a/pages/user/login.uvue
+++ b/pages/user/login.uvue
@@ -141,7 +141,8 @@
 <script setup lang="uts">
 import { ref, onMounted } from 'vue'
 import supa from '@/components/supadb/aksupainstance.uts'
-import { getCurrentUser, logout } from '@/utils/store.uts'
+import { getCurrentUser, logout, setIsLoggedIn, setUserProfile } from '@/utils/store.uts'
+import type { UserProfile } from '@/pages/user/types.uts'
 
 const cssVars = {
   '--bg': '#f5f6f8',
@@ -172,8 +173,10 @@ const codeCountdown = ref<number>(0)
 onMounted(() => {
   try {
     const sessionInfo = supa.getSession()
-    if (sessionInfo != null && sessionInfo.user != null) {
-      uni.switchTab({ url: '/pages/mall/consumer/index' })
+    // 只有当用户确实存在，且 ID 有效时才自动跳转
+    if (sessionInfo != null && sessionInfo.user != null && sessionInfo.user?.getString('id') != null) {
+       console.log('检测到有效会话，自动跳转首页')
+       uni.switchTab({ url: '/pages/mall/consumer/index' })
     }
   } catch (e) {
     console.error('检查登录状态失败:', e)
@@ -245,6 +248,35 @@ const getCode = async () => {
 
 const handleLogin = async () => {
   if (!validateAccount()) return
+
+  // 特殊账号处理：admin/admin 直接跳转
+  if (account.value === 'admin' && password.value === 'admin') {
+    setIsLoggedIn(true)
+    const adminProfile = {
+      id: 'admin',
+      username: 'Admin',
+      email: 'admin@mall.com',
+      gender: 'unknown',
+      birthday: '',
+      height_cm: 0,
+      weight_kg: 0,
+      bio: 'Administrator',
+      avatar_url: '/static/logo.png',
+      preferred_language: 'zh-CN',
+      role: 'admin',
+      school_id: '',
+      grade_id: '',
+      class_id: ''
+    } as UserProfile
+    setUserProfile(adminProfile)
+    
+    uni.showToast({ title: '管理员登录成功', icon: 'success' })
+    setTimeout(() => {
+      uni.switchTab({ url: '/pages/mall/consumer/index' })
+    }, 500)
+    return
+  }
+
   if (loginType.value === 0) {
     if (!validatePassword()) return
   } else {
diff --git a/utils/supabaseService.uts b/utils/supabaseService.uts
index 0fd1cd5c..bac53939 100644
--- a/utils/supabaseService.uts
+++ b/utils/supabaseService.uts
@@ -19,12 +19,14 @@ export interface Product {
   id: string
   category_id: string
   name: string
+  description?: string
   specification: string
   price: number
   original_price?: number
   image?: string
   manufacturer: string
   sales: number
+  stock: number
   badge?: string
   shop_id?: string
   shop_name?: string
@@ -111,14 +113,27 @@ class SupabaseService {
   async searchProducts(
     keyword: string, 
     page: number = 1, 
-    limit: number = 20
+    limit: number = 20,
+    sortBy: string = 'sales',
+    ascending: boolean = false
   ): Promise<PaginatedResponse<Product>> {
     try {
-      const response = await supa
+      let query = supa
         .from('products')
         .select('*', { count: 'exact' })
         .or(`name.ilike.%${keyword}%,manufacturer.ilike.%${keyword}%,specification.ilike.%${keyword}%`)
-        .order('sales', { ascending: false })
+      
+      // 根据sortBy和ascending设置排序
+      if (sortBy === 'price') {
+        query = query.order('price', { ascending })
+      } else if (sortBy === 'sales') {
+        query = query.order('sales', { ascending: false }) // 销量总是降序
+      } else {
+        // 默认按销量降序
+        query = query.order('sales', { ascending: false })
+      }
+      
+      const response = await query
         .page(page)
         .limit(limit)
         .execute()
@@ -175,7 +190,7 @@ class SupabaseService {
     }
   }
 
-  // 获取热销商品
+  // 获取热销商品（按销量排序）
   async getHotProducts(limit: number = 10): Promise<Product[]> {
     try {
       const response = await supa
@@ -197,13 +212,58 @@ class SupabaseService {
     }
   }
 
-  // 获取推荐商品（带badge的商品）
-  async getRecommendedProducts(limit: number = 10): Promise<Product[]> {
+  // 获取按价格排序的商品（升序：从低到高）
+  async getProductsByPrice(limit: number = 10, ascending: boolean = true): Promise<Product[]> {
     try {
       const response = await supa
         .from('products')
         .select('*')
-        .not('badge', 'is', null)
+        .order('price', { ascending })
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取价格排序商品失败:', response.error)
+        return []
+      }
+      
+      return response.data as Product[]
+    } catch (error) {
+      console.error('获取价格排序商品异常:', error)
+      return []
+    }
+  }
+
+  // 获取新品（按创建时间排序，最新的在前）
+  async getProductsByNewest(limit: number = 10): Promise<Product[]> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*')
+        .order('created_at', { ascending: false })
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取新品失败:', response.error)
+        return []
+      }
+      
+      return response.data as Product[]
+    } catch (error) {
+      console.error('获取新品异常:', error)
+      return []
+    }
+  }
+
+  // 获取推荐商品（带badge的商品）
+  async getRecommendedProducts(limit: number = 10): Promise<Product[]> {
+    try {
+      // 直接使用 neq 空字符串查询，忽略 null 值（null 表示没有 badge，不应被推荐）
+      const response = await supa
+        .from('products')
+        .select('*')
+        .neq('badge', '')
         .order('sales', { ascending: false })
         .limit(limit)
         .execute()
@@ -213,12 +273,37 @@ class SupabaseService {
         return []
       }
       
-      return response.data as Product[]
+      console.log('推荐商品查询结果条数:', response.data?.length || 0)
+      return response.data as Product[] || []
     } catch (error) {
       console.error('获取推荐商品异常:', error)
       return []
     }
   }
+
+  // 获取特价商品（badge为'特价'）
+  async getDiscountProducts(limit: number = 10): Promise<Product[]> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*')
+        .eq('badge', '特价')
+        .order('sales', { ascending: false })
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取特价商品失败:', response.error)
+        return []
+      }
+      
+      console.log('特价商品查询结果条数:', response.data?.length || 0)
+      return response.data as Product[] || []
+    } catch (error) {
+      console.error('获取特价商品异常:', error)
+      return []
+    }
+  }
 }
 
 // 导出单例实例