From 0ed62a82583382449a860a0d5bd7517a93c88dc9 Mon Sep 17 00:00:00 2001 From: cyh666666 <2398882793@qq.com> Date: Fri, 23 Jan 2026 17:31:07 +0800 Subject: [PATCH] 20260123new --- pages.json | 7 + pages/mall/consumer/category.uvue | 65 +- ...gory - 副本 (2).uvue => categorygood.uvue} | 375 ++- pages/mall/consumer/index - 副本 (2).uvue | 1455 ------------ pages/mall/consumer/index - 副本 (3).uvue | 1550 ------------ pages/mall/consumer/index.uvue | 60 +- pages/mall/consumer/indexgood.uvue | 2113 +++++++++++++++++ pages/mall/consumer/search.uvue | 1173 ++++++--- 8 files changed, 3372 insertions(+), 3426 deletions(-) rename pages/mall/consumer/{category - 副本 (2).uvue => categorygood.uvue} (65%) delete mode 100644 pages/mall/consumer/index - 副本 (2).uvue delete mode 100644 pages/mall/consumer/index - 副本 (3).uvue create mode 100644 pages/mall/consumer/indexgood.uvue diff --git a/pages.json b/pages.json index 2a92a152..6cac3ba5 100644 --- a/pages.json +++ b/pages.json @@ -32,6 +32,13 @@ "style": { "navigationBarTitleText": "我的" } + }, + { + "path": "pages/mall/consumer/search", + "style": { + "navigationBarTitleText": "搜索", + "navigationStyle": "custom" + } } ], "tabBar": { diff --git a/pages/mall/consumer/category.uvue b/pages/mall/consumer/category.uvue index b46448fc..ab0d75de 100644 --- a/pages/mall/consumer/category.uvue +++ b/pages/mall/consumer/category.uvue @@ -593,7 +593,7 @@ const addToCart = (product: any) => { } // 导航函数 -const navigateToSearch = () => uni.navigateTo({ url: '/pages/medicine/search' }) +const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' }) const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' }) const navigateToProduct = (product: any) => { uni.navigateTo({ @@ -692,6 +692,7 @@ const navigateToProduct = (product: any) => { /* 分类内容区 */ .category-content { display: flex; + flex-direction: row; /* 强制水平排列 */ margin-top: 60px; padding: 0 16px; max-width: 1400px; @@ -699,31 +700,38 @@ const navigateToProduct = (product: any) => { margin-right: auto; width: 100%; gap: 20px; + height: calc(100vh - 60px); /* 设置固定高度，减去头部高度 */ + 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; - padding: 12px 16px; + 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: translateX(2px); + transform: translateY(-2px); /* 悬停时向上浮动 */ } .primary-item.active { @@ -732,26 +740,34 @@ const navigateToProduct = (product: any) => { } .primary-icon { - font-size: 18px; - margin-right: 8px; - min-width: 24px; + font-size: 24px; + margin-bottom: 6px; + margin-right: 0; /* 移除右边距 */ text-align: center; + display: block; } .primary-name { - font-size: 14px; + font-size: 13px; line-height: 1.4; + display: block; } /* 右侧内容区 */ .product-content { flex: 1; - padding: 16px 0; + height: 100%; /* 占满父容器高度 */ + padding: 0; /* 移除内边距，交给内部元素 */ + overflow-y: auto; /* 允许内部滚动 */ } .category-header { - margin-bottom: 20px; - padding: 0 8px; + margin-bottom: 16px; + padding: 16px 8px 0 8px; + position: sticky; + top: 0; + background-color: #f8fafc; + z-index: 10; } .category-title { @@ -949,37 +965,40 @@ const navigateToProduct = (product: any) => { /* 小屏手机 (小于414px) */ @media screen and (max-width: 414px) { .category-content { - flex-direction: column; - padding: 0 12px; + /* flex-direction: column; 移除这一行，保持 row 布局 */ + padding: 0 8px; + gap: 10px; } .primary-category { - width: 100%; - display: flex; - flex-wrap: wrap; - padding: 8px; + 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; + gap: 12px; + padding: 0 4px 20px 4px; /* 增加底部内边距 */ } .search-container { @@ -992,7 +1011,7 @@ const navigateToProduct = (product: any) => { } .category-header { - padding: 0; + padding: 12px 4px 0 4px; } } diff --git a/pages/mall/consumer/category - 副本 (2).uvue b/pages/mall/consumer/categorygood.uvue similarity index 65% rename from pages/mall/consumer/category - 副本 (2).uvue rename to pages/mall/consumer/categorygood.uvue index d3a5b3e2..b46448fc 100644 --- a/pages/mall/consumer/category - 副本 (2).uvue +++ b/pages/mall/consumer/categorygood.uvue @@ -104,6 +104,9 @@ const hasMore = ref(true) const currentCategoryName = ref('感冒发烧') const currentCategoryDesc = ref('解热镇痛') +// 页面参数 +const pageParams = ref({}) + // 医药分类数据（与主页一致） const medicineCategories = [ { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' }, @@ -118,7 +121,7 @@ const medicineCategories = [ { id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' } ] -// Mock 商品数据 +// Mock 商品数据 - 使用本地图片避免网络请求 const mockProducts = { cold: [ { @@ -127,7 +130,7 @@ const mockProducts = { specification: '0.3g*24粒', price: 18.5, originalPrice: 25.8, - image: 'https://picsum.photos/300/300?random=cold1', + image: '/static/images/default-product.png', manufacturer: '修正药业', sales: 2560, badge: '热销' @@ -138,7 +141,7 @@ const mockProducts = { specification: '10g*20袋', price: 22.8, originalPrice: 29.9, - image: 'https://picsum.photos/300/300?random=cold2', + image: '/static/images/default-product.png', manufacturer: '白云山', sales: 1890, badge: '推荐' @@ -149,7 +152,7 @@ const mockProducts = { specification: '0.35g*36粒', price: 42.8, originalPrice: 48.0, - image: 'https://picsum.photos/300/300?random=cold3', + image: '/static/images/default-product.png', manufacturer: '以岭药业', sales: 3200, badge: '爆款' @@ -160,7 +163,7 @@ const mockProducts = { specification: '0.5g*12片', price: 8.9, originalPrice: 12.0, - image: 'https://picsum.photos/300/300?random=cold4', + image: '/static/images/default-product.png', manufacturer: '强生制药', sales: 1420, badge: '特价' @@ -171,7 +174,7 @@ const mockProducts = { specification: '3g*10袋', price: 16.5, originalPrice: 19.9, - image: 'https://picsum.photos/300/300?random=cold5', + image: '/static/images/default-product.png', manufacturer: '同仁堂', sales: 980, badge: '新品' @@ -182,7 +185,7 @@ const mockProducts = { specification: '10片/盒', price: 12.8, originalPrice: 15.0, - image: 'https://picsum.photos/300/300?random=cold6', + image: '/static/images/default-product.png', manufacturer: '三九医药', sales: 1650, badge: '家庭装' @@ -196,7 +199,7 @@ const mockProducts = { specification: '0.4g*24粒', price: 32.8, originalPrice: 38.5, - image: 'https://picsum.photos/300/300?random=stomach1', + image: '/static/images/default-product.png', manufacturer: '三九医药', sales: 890, badge: '热销' @@ -207,7 +210,7 @@ const mockProducts = { specification: '20mg*14粒', price: 28.5, originalPrice: 35.0, - image: 'https://picsum.photos/300/300?random=stomach2', + image: '/static/images/default-product.png', manufacturer: '阿斯利康', sales: 1250, badge: '处方药' @@ -218,7 +221,7 @@ const mockProducts = { specification: '0.8g*32片', price: 15.9, originalPrice: 19.9, - image: 'https://picsum.photos/300/300?random=stomach3', + image: '/static/images/default-product.png', manufacturer: '江中制药', sales: 2100, badge: '推荐' @@ -229,7 +232,7 @@ const mockProducts = { specification: '3g*10袋', price: 18.6, originalPrice: 22.0, - image: 'https://picsum.photos/300/300?random=stomach4', + image: '/static/images/default-product.png', manufacturer: '益普生', sales: 1780, badge: '止泻' @@ -240,7 +243,7 @@ const mockProducts = { specification: '10mg*30片', price: 22.8, originalPrice: 26.5, - image: 'https://picsum.photos/300/300?random=stomach5', + image: '/static/images/default-product.png', manufacturer: '西安杨森', sales: 950, badge: '促消化' @@ -251,7 +254,7 @@ const mockProducts = { specification: '0.5g*20片', price: 25.9, originalPrice: 29.9, - image: 'https://picsum.photos/300/300?random=stomach6', + image: '/static/images/default-product.png', manufacturer: '拜耳', sales: 1320, badge: '护胃' @@ -265,7 +268,7 @@ const mockProducts = { specification: '0.25g*24粒', price: 28.5, originalPrice: 35.0, - image: 'https://picsum.photos/300/300?random=pain1', + image: '/static/images/default-product.png', manufacturer: '华北制药', sales: 1560, badge: '处方药' @@ -276,7 +279,7 @@ const mockProducts = { specification: '75mg*10片', price: 19.8, originalPrice: 24.0, - image: 'https://picsum.photos/300/300?random=pain2', + image: '/static/images/default-product.png', manufacturer: '诺华制药', sales: 1280, badge: '止痛' @@ -287,7 +290,7 @@ const mockProducts = { specification: '0.25g*32粒', price: 35.9, originalPrice: 42.0, - image: 'https://picsum.photos/300/300?random=pain3', + image: '/static/images/default-product.png', manufacturer: '云南白药', sales: 2350, badge: '经典' @@ -298,7 +301,7 @@ const mockProducts = { specification: '0.2g*10粒', price: 48.6, originalPrice: 55.0, - image: 'https://picsum.photos/300/300?random=pain4', + image: '/static/images/default-product.png', manufacturer: '辉瑞', sales: 890, badge: '抗炎' @@ -309,7 +312,7 @@ const mockProducts = { specification: '0.1g*24片', price: 12.5, originalPrice: 15.0, - image: 'https://picsum.photos/300/300?random=pain5', + image: '/static/images/default-product.png', manufacturer: '中美史克', sales: 1680, badge: '经济装' @@ -320,7 +323,7 @@ const mockProducts = { specification: '0.1g*6粒', price: 32.8, originalPrice: 38.0, - image: 'https://picsum.photos/300/300?random=pain6', + image: '/static/images/default-product.png', manufacturer: '广州白云山', sales: 1120, badge: '抗生素' @@ -344,7 +347,7 @@ const generateDefaultProducts = (categoryId: string) => { ...product, specification: '规格待定', originalPrice: product.price * 1.2, - image: `https://picsum.photos/300/300?random=${categoryId}${index}`, + image: '/static/images/default-product.png', badge: index === 0 ? '热销' : index === 1 ? '推荐' : '' })) } @@ -352,6 +355,149 @@ const generateDefaultProducts = (categoryId: string) => { // 生命周期 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中未找到分类参数') + console.log('保持当前分类显示:', activePrimary.value) + } + + 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执行完成 ===') }) // 初始化页面 @@ -359,32 +505,82 @@ const initPage = () => { const systemInfo = uni.getSystemInfoSync() statusBarHeight.value = systemInfo.statusBarHeight || 0 + // 获取页面参数 + const pages = getCurrentPages() + if (pages.length > 0) { + const currentPage = pages[pages.length - 1] + pageParams.value = currentPage.options || {} + } + // 加载分类数据 primaryCategories.value = medicineCategories - - // 默认加载感冒发烧分类 - selectPrimaryCategory('cold') } // 选择一级分类 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函数执行完成 ===') } // 添加到购物车 @@ -818,17 +1014,146 @@ const navigateToProduct = (product: any) => { /* 桌面端 (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: 24px; + 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; } } - \ No newline at end of file + diff --git a/pages/mall/consumer/index - 副本 (2).uvue b/pages/mall/consumer/index - 副本 (2).uvue deleted file mode 100644 index 3d656339..00000000 --- a/pages/mall/consumer/index - 副本 (2).uvue +++ /dev/null @@ -1,1455 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/pages/mall/consumer/index - 副本 (3).uvue b/pages/mall/consumer/index - 副本 (3).uvue deleted file mode 100644 index a2f3c8a5..00000000 --- a/pages/mall/consumer/index - 副本 (3).uvue +++ /dev/null @@ -1,1550 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/pages/mall/consumer/index.uvue b/pages/mall/consumer/index.uvue index f780dd9d..2133fc67 100644 --- a/pages/mall/consumer/index.uvue +++ b/pages/mall/consumer/index.uvue @@ -823,19 +823,17 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' display: flex; align-items: center; width: 100%; - gap: 20px; - flex-wrap: wrap; + gap: 16px; + flex-wrap: nowrap; /* 强制不换行 */ justify-content: space-between; } /* 品牌标识区域 - 自适应平铺 */ .brand-logo-area { - flex-shrink: 1; - min-width: 120px; - max-width: 200px; + flex-shrink: 0; /* 防止被压缩 */ + min-width: auto; display: flex; align-items: center; - flex-grow: 0; } /* 小屏幕隐藏品牌标识 */ @@ -858,20 +856,21 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' font-weight: bold; color: white; letter-spacing: 0.5px; + white-space: nowrap; /* 防止文字换行 */ } .brand-tag { font-size: 11px; color: rgba(255, 255, 255, 0.9); margin-top: 2px; + white-space: nowrap; /* 防止文字换行 */ } /* 导航栏搜索框容器 - 自适应平铺 */ .nav-search-container { - flex: 1; + flex: 1; /* 占据剩余空间 */ min-width: 0; /* 允许缩小 */ - max-width: 100%; /* 确保在小屏幕上不会溢出 */ - flex-grow: 1; + max-width: 100%; } .nav-search { @@ -1205,10 +1204,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 +1226,28 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' .sort-tabs { display: flex; - gap: 12px; + gap: 8px; align-items: center; - flex-wrap: wrap; - justify-content: flex-start; + flex-wrap: nowrap; /* 强制不换行 */ + justify-content: space-between; /* 两端对齐 */ + width: 100%; /* 占满宽度 */ + margin-top: 12px; /* 增加顶部间距，与标题分开 */ } .sort-tab { font-size: 13px; color: #666; - padding: 6px 16px; + padding: 8px 0; /* 上下padding，左右由flex均分 */ 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; /* 均分宽度 */ + text-align: center; /* 文字居中 */ + display: flex; + justify-content: center; + align-items: center; } .sort-tab.active { @@ -1467,23 +1480,28 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' .recommend-filters { display: flex; - gap: 12px; + gap: 8px; align-items: center; - flex-wrap: wrap; - justify-content: flex-start; + flex-wrap: nowrap; /* 强制不换行 */ + justify-content: space-between; /* 两端对齐 */ + width: 100%; /* 占满宽度 */ + margin-top: 12px; /* 增加顶部间距 */ } .filter-item { font-size: 13px; color: #666; - padding: 6px 16px; + padding: 8px 0; /* 上下padding，左右由flex均分 */ 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; /* 均分宽度 */ + text-align: center; /* 文字居中 */ + display: flex; + justify-content: center; + align-items: center; } .filter-item.active { diff --git a/pages/mall/consumer/indexgood.uvue b/pages/mall/consumer/indexgood.uvue new file mode 100644 index 00000000..f780dd9d --- /dev/null +++ b/pages/mall/consumer/indexgood.uvue @@ -0,0 +1,2113 @@ + + + + + + diff --git a/pages/mall/consumer/search.uvue b/pages/mall/consumer/search.uvue index feeea53d..9318327c 100644 --- a/pages/mall/consumer/search.uvue +++ b/pages/mall/consumer/search.uvue @@ -19,7 +19,7 @@ @confirm="onSearch" placeholder="请输入药品名称、症状或品牌" placeholder-class="placeholder" - focus + :focus="autoFocus" /> × @@ -33,69 +33,104 @@ + + + + ⚠️ + 加载服务器超时 + 请点击屏幕重试 + + + - - - - - 搜索历史 - 清空 - - - - {{ item }} - × - - - - - - - - 热门搜索 - - - - {{ index + 1 }} - {{ item.keyword }} - 🔥 - - - - - - - - 按分类搜索 - - - - - {{ category.icon }} + + + + + + + 搜索历史 + + 清空 + 🗑️ + + + + + {{ item }} + + × + + + + + + + + + 热门搜索 + + + + {{ index + 1 }} + {{ item.keyword }} + 🔥 + + + + + + + + + ✨ + 猜你需要 + + 换一批 + + + + + + + + + {{ item.name }} + + ¥ + {{ item.price }} + 已售{{ item.sales }} + + - {{ category.name }} - + 搜索结果 - 共{{ searchResults.length }}个结果 + + 综合 + 销量 + 价格 + - + {{ product.name }} + + {{ product.tag }} + {{ product.specification }} - - {{ product.manufacturer }} - 已售{{ product.sales }} - - - - + + ¥ {{ product.price }} - - ¥{{ product.originalPrice }} - - - - - {{ product.tag }} - {{ product.featured }} + + + + + + + 🤔 + 未找到相关商品 + 换个关键词试试吧 + + @@ -158,18 +197,11 @@ - --- 没有更多了 --- + --- 到底了 --- - - - 🔍 - 暂无搜索结果 - 换个关键词试试吧 - - - + @@ -178,336 +210,773 @@ \ No newline at end of file