20260123new
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -104,6 +104,9 @@ const hasMore = ref(true)
|
||||
const currentCategoryName = ref('感冒发烧')
|
||||
const currentCategoryDesc = ref('解热镇痛')
|
||||
|
||||
// 页面参数
|
||||
const pageParams = ref<any>({})
|
||||
|
||||
// 医药分类数据(与主页一致)
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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 {
|
||||
|
||||
2113
pages/mall/consumer/indexgood.uvue
Normal file
2113
pages/mall/consumer/indexgood.uvue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user