huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

consumerm模块完成度90%，完善消费者和商家端数据库表，商品、聊天、订单数据对接好了supabase，和商家端对接了聊天功能，安卓端编译通过了css样式，剩余几个页面在处理函数规范问题

Browse Source
This commit is contained in:
cyh666666
2026-02-24 17:17:49 +08:00
parent e2f1dfb097
commit e606c597ca
174 changed files with 37917 additions and 4444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

655
pages/mall/consumer/category.uvue
View File

@@ -25,14 +25,11 @@
</view>
</view>
<!-- 导航栏占位 -->
<view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
<!-- 分类内容区 -->
<view
class="category-content"
:style="{
marginTop: (statusBarHeight + headerHeight + 10) + 'px',
height: `calc(100vh - ${statusBarHeight + headerHeight + 10}px)`
}"
>
<view class="category-content">
<!-- 左侧一级分类 -->
<scroll-view scroll-y class="primary-category">
<view
@@ -88,7 +85,7 @@
</view>
<view class="product-meta">
<text class="manufacturer">{{ product.brand_name || product.shop_name || '自营' }}</text>
<text class="manufacturer">{{ product.brand_name ?? product.shop_name ?? '自营' }}</text>
<view class="sales-info">
<text class="sales-count">已售{{ product.sale_count }}</text>
</view>
@@ -116,12 +113,20 @@
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import supabaseService from '@/utils/supabaseService.uts'
import type { Category, Product } from '@/utils/supabaseService.uts'
import type { Product } from '@/utils/supabaseService.uts'
type LocalCategory = {
id: string
name: string
icon: string
description: string
color: string
}
// 响应式数据
const statusBarHeight = ref(0)
const headerHeight = ref(44) // 默认头部高度
const primaryCategories = ref<Category[]>([])
const primaryCategories = ref<LocalCategory[]>([])
const productList = ref<Product[]>([])
const activePrimary = ref<string>('')
const cartCount = ref(3)
@@ -137,67 +142,10 @@ const currentCategoryDesc = ref('')
// 页面参数
const pageParams = ref<any>({})
// 生命周期
onMounted(async() => {
await loadCategories()
// 等待分类加载完成后，再检查是否需要加载默认分类的商品
// 延迟一点时间，确保页面参数处理完成
setTimeout(async () => {
if (!hasLoadedFromParams.value && activePrimary.value) {
await loadProducts()
}
}, 300)
})
// 添加加载分类的方法
const loadCategories = async () => {
try {
const categoriesData = await supabaseService.getCategories()
console.log('加载分类数据成功，数量:', categoriesData.length)
// 映射数据并添加默认颜色，防止选中时背景透明导致文字看不清
const categories = categoriesData.map((cat: any) => ({
id: cat.id,
name: cat.name,
icon: cat.icon_url || '📦',
desc: cat.description || '',
description: cat.description || '', // 兼容不同字段名
color: cat.color || '#4CAF50' // 默认绿色，如果有color字段则使用
})) as Category[]
if (categories.length > 0) {
primaryCategories.value = categories
// 如果没有通过参数设置分类，则设置默认选中第一个分类
if (!activePrimary.value && categories[0]) {
activePrimary.value = categories[0].id
console.log('设置默认分类为:', categories[0].name, 'ID:', categories[0].id)
currentCategoryName.value = categories[0].name
currentCategoryDesc.value = categories[0].description || ''
} else if (activePrimary.value) {
// 如果已经选中了分类（可能来自Storage），更新显示信息
const current = categories.find(c => c.id == activePrimary.value)
if (current) {
currentCategoryName.value = current.name
currentCategoryDesc.value = current.description || ''
// 如果此时没有商品列表（且没有正在加载），可能需要加载
if (productList.value.length === 0 && !loading.value) {
loadProducts()
}
}
}
} else {
console.warn('从Supabase获取的分类数据为空')
}
} catch (error) {
console.error('加载分类数据失败:', error)
}
}
// 加载商品数据
const loadProducts = async () => {
async function loadProducts(): Promise<void> {
if (loading.value) return
if (!activePrimary.value) {
if (activePrimary.value == '') {
console.warn('activePrimary为空，无法加载商品')
return
}
@@ -222,10 +170,10 @@ const loadProducts = async () => {
hasMore.value = response.hasmore
// 更新当前分类信息
const category = primaryCategories.value.find(cat => cat.id === activePrimary.value)
if (category) {
const category = primaryCategories.value.find((cat: LocalCategory): boolean => cat.id === activePrimary.value)
if (category != null) {
currentCategoryName.value = category.name
currentCategoryDesc.value = category.description || ''
currentCategoryDesc.value = category.description
}
console.log('商品列表加载完成，当前总数量:', productList.value.length)
@@ -239,175 +187,82 @@ const loadProducts = async () => {
}
}
async function loadCategories(): Promise<void> {
try {
const categoriesData = await supabaseService.getCategories()
console.log('加载分类数据成功，数量:', categoriesData.length)
// 映射数据并添加默认颜色，防止选中时背景透明导致文字看不清
// 过滤掉医药健康相关分类
const categories: LocalCategory[] = []
const rawList = categoriesData as any[]
for (let i = 0; i < rawList.length; i++) {
const raw = rawList[i]
const catObj = (raw instanceof UTSJSONObject) ? (raw as UTSJSONObject) : (JSON.parse(JSON.stringify(raw)) as UTSJSONObject)
const name = catObj.getString('name') ?? ''
if (name.includes('医药') || name.includes('健康')) {
continue
}
const id = catObj.getString('id') ?? ''
const description = catObj.getString('description') ?? ''
const icon = catObj.getString('icon') ?? catObj.getString('icon_url') ?? '📦'
const color = catObj.getString('color') ?? '#4CAF50'
categories.push({
id,
name,
icon,
description,
color
})
}
if (categories.length > 0) {
primaryCategories.value = categories
// 如果没有通过参数设置分类，则设置默认选中一个分类
if (activePrimary.value == '') {
// 优先查找"厨具"相关的分类作为默认
const defaultCategory = categories.find((c: LocalCategory): boolean => c.name.includes('厨具')) ?? categories[0]
activePrimary.value = defaultCategory.id
console.log('设置默认分类为:', defaultCategory.name, 'ID:', defaultCategory.id)
currentCategoryName.value = defaultCategory.name
currentCategoryDesc.value = defaultCategory.description
} else {
// 如果已经选中了分类（可能来自Storage），更新显示信息
const current = categories.find((c: LocalCategory): boolean => c.id == activePrimary.value)
if (current != null) {
currentCategoryName.value = current.name
currentCategoryDesc.value = current.description
// 如果此时没有商品列表（且没有正在加载），可能需要加载
if (productList.value.length === 0 && !loading.value) {
loadProducts()
}
}
}
} else {
console.warn('从Supabase获取的分类数据为空')
}
} catch (error) {
console.error('加载分类数据失败:', error)
}
}
// 加载更多
const loadMore = () => {
function loadMore(): void {
if (hasMore.value && !loading.value) {
currentPage.value++
loadProducts()
}
}
// 页面加载时处理参数 - 这是处理分类切换的主要入口
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) {
hasLoadedFromParams.value = true
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)
// 1. 优先检查 Storage 中的参数 (由首页传入)
const storageCategoryId = uni.getStorageSync('selectedCategory')
if (storageCategoryId) {
console.log('✅ onShow中找到Storage分类参数:', storageCategoryId)
hasLoadedFromParams.value = true
// 清除Storage，防止下次误读
uni.removeStorageSync('selectedCategory')
if (activePrimary.value !== storageCategoryId) {
selectPrimaryCategory(storageCategoryId)
}
// 如果分类还没加载完，这里设置了ID，等loadCategories完成后会自动匹配信息
return
}
// 在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) {
hasLoadedFromParams.value = true
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) {
hasLoadedFromParams.value = true
console.log('✅ 从URL解析到分类参数:', urlCategoryId)
selectPrimaryCategory(urlCategoryId)
}
}
}
}
}
console.log('=== category页面onShow执行完成 ===')
})
// 选择一级分类
const selectPrimaryCategory = async (categoryId: string) => {
async function selectPrimaryCategory(categoryId: string): Promise<void> {
console.log('=== selectPrimaryCategory函数开始执行 ===')
console.log('传入的categoryId:', categoryId)
console.log('当前时间:', Date.now())
// 验证categoryId是否有效
if (!categoryId) {
if (categoryId == '') {
console.error('categoryId为空，尝试使用第一个分类')
if (primaryCategories.value.length > 0) {
categoryId = primaryCategories.value[0].id
@@ -425,8 +280,8 @@ const selectPrimaryCategory = async (categoryId: string) => {
console.log('更新后的activePrimary:', activePrimary.value)
// 更新当前分类信息
const category = primaryCategories.value.find(cat => cat.id === categoryId)
if (category) {
const category = primaryCategories.value.find((cat: LocalCategory): boolean => cat.id === categoryId)
if (category != null) {
currentCategoryName.value = category.name
currentCategoryDesc.value = category.description
console.log('✅ 找到分类:', category.name, '描述:', category.description)
@@ -465,11 +320,159 @@ const selectPrimaryCategory = async (categoryId: string) => {
console.log('=== selectPrimaryCategory函数执行完成 ===')
}
// 生命周期
onMounted(() => {
loadCategories().then(() => {
setTimeout(() => {
if (!hasLoadedFromParams.value && activePrimary.value != '') {
loadProducts()
}
}, 300)
})
})
// 页面加载时处理参数 - 这是处理分类切换的主要入口
onLoad((options: any) => {
console.log('=== category页面onLoad被调用 ===')
console.log('页面加载时间:', Date.now())
console.log('传入的options参数:', options)
console.log('当前活动分类:', activePrimary.value)
let categoryId = ''
let categoryName = ''
// 首先检查传入的options参数
const optObj = (options instanceof UTSJSONObject) ? (options as UTSJSONObject) : (JSON.parse(JSON.stringify(options ?? {})) as UTSJSONObject)
const optCategoryId = optObj.getString('categoryId') ?? ''
if (optCategoryId !== '') {
categoryId = optCategoryId
categoryName = optObj.getString('name') ?? ''
console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
}
// 如果options中没有，尝试从getCurrentPages()获取
if (categoryId == '') {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const rawPageOptions = currentPage.options ?? {}
console.log('从getCurrentPages()获取参数:', rawPageOptions)
const pageOptObj = (rawPageOptions instanceof UTSJSONObject) ? (rawPageOptions as UTSJSONObject) : (JSON.parse(JSON.stringify(rawPageOptions)) as UTSJSONObject)
const pageCategoryId = pageOptObj.getString('categoryId') ?? ''
if (pageCategoryId !== '') {
categoryId = pageCategoryId
categoryName = pageOptObj.getString('name') ?? ''
console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
}
}
}
// 如果有找到分类ID，则选中对应的分类
if (categoryId != '') {
hasLoadedFromParams.value = true
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)
// 1. 优先检查 Storage 中的参数 (由首页传入)
const storageCategoryId = (uni.getStorageSync('selectedCategory') as string) ?? ''
if (storageCategoryId !== '') {
console.log('✅ onShow中找到Storage分类参数:', storageCategoryId)
hasLoadedFromParams.value = true
// 清除Storage，防止下次误读
uni.removeStorageSync('selectedCategory')
if (activePrimary.value !== storageCategoryId) {
selectPrimaryCategory(storageCategoryId)
}
// 如果分类还没加载完，这里设置了ID，等loadCategories完成后会自动匹配信息
return
}
// 在onShow中，我们也需要检查是否有新的参数
// 因为当从主页再次点击分类跳转过来时，可能不会触发onLoad
// 而是触发onShow
// 获取当前页面实例和参数
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const rawPageOptions = currentPage.options ?? {}
console.log('onShow中获取参数:', rawPageOptions)
const pageOptObj = (rawPageOptions instanceof UTSJSONObject) ? (rawPageOptions as UTSJSONObject) : (JSON.parse(JSON.stringify(rawPageOptions)) as UTSJSONObject)
// 检查是否有分类参数
const pageCategoryId = pageOptObj.getString('categoryId') ?? ''
if (pageCategoryId !== '') {
hasLoadedFromParams.value = true
const categoryId = pageCategoryId
const categoryName = pageOptObj.getString('name') ?? ''
console.log('✅ onShow中找到分类参数:', categoryId, categoryName)
console.log('URL中的时间戳参数:', pageOptObj.getString('timestamp') ?? '')
console.log('URL中的随机参数:', pageOptObj.getString('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('=== category页面onShow执行完成 ===')
})
// 添加到购物车
const addToCart = async (product: any) => {
async function addToCart(product: Product): Promise<void> {
uni.showLoading({ title: '添加中...' })
try {
const success = await supabaseService.addToCart(product.id, 1)
const pid = (product.id ?? '').toString()
if (pid === '') {
uni.hideLoading()
uni.showToast({ title: '商品无效', icon: 'none' })
return
}
const success = await supabaseService.addToCart(pid, 1, '')
if (success) {
uni.showToast({
title: '已添加到购物车',
@@ -491,14 +494,15 @@ const addToCart = async (product: any) => {
}
// 导航函数
const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
const navigateToCart = () => uni.navigateTo({ url: '/pages/mall/consumer/cart' })
const navigateToProduct = (product: any) => {
const id = product.id
const price = (product.base_price || 0).toString()
const originalPrice = (product.market_price || '').toString()
const name = encodeURIComponent(product.name || '')
const image = encodeURIComponent(product.main_image_url || '')
function navigateToSearch(): void { uni.navigateTo({ url: '/pages/mall/consumer/search' }) }
function navigateToCart(): void { uni.navigateTo({ url: '/pages/mall/consumer/cart' }) }
function navigateToProduct(product: Product): void {
const id = (product.id ?? '').toString()
if (id === '') return
const price = (product.base_price ?? 0).toString()
const originalPrice = (product.market_price ?? '').toString()
const name = encodeURIComponent(product.name ?? '')
const image = encodeURIComponent(product.main_image_url ?? '')
uni.navigateTo({
url: `/pages/mall/consumer/product-detail?id=${id}&productId=${id}&price=${price}&originalPrice=${originalPrice}&name=${name}&image=${image}`
@@ -506,7 +510,7 @@ const navigateToProduct = (product: any) => {
}
// 相机功能
const onCamera = () => {
function onCamera(): void {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
@@ -531,7 +535,7 @@ const onCamera = () => {
}
// 扫码功能
const onScan = () => {
function onScan(): void {
uni.scanCode({
success: (res) => {
console.log('扫码成功:', res)
@@ -550,7 +554,8 @@ const onScan = () => {
<style>
.category-page {
width: 100%;
min-height: 100vh;
height: 100%;
overflow: hidden;
background-color: #f8fafc;
display: flex;
flex-direction: column;
@@ -567,14 +572,20 @@ const onScan = () => {
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
}
/* 导航栏占位 */
.navbar-placeholder {
flex-shrink: 0;
}
/* 搜索栏 */
/* 导航栏搜索框容器内边距调整 */
.search-container {
height: 44px; /* 调整为与消息页一致的高度 */
height: 44px;
padding: 0 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
@@ -593,12 +604,11 @@ const onScan = () => {
border-radius: 20px;
padding: 0 4px 0 12px;
display: flex;
flex-direction: row; /* UVUE 显式设置 row */
flex-direction: row;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
height: 32px;
}
.search-placeholder {
@@ -613,7 +623,7 @@ const onScan = () => {
.nav-inner-search-text {
font-size: 12px; /* 字体稍微变小 */
color: #ffffff;
font-weight: 500;
font-weight: normal;
}
.icon {
@@ -683,29 +693,28 @@ const onScan = () => {
/* 分类内容区 */
.category-content {
flex: 1;
height: 0px;
display: flex;
flex-direction: row; /* 强制水平排列 */
/* margin-top: 44px; 已通过 style 动态绑定 */
flex-direction: row;
padding: 0 16px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
width: 100%;
gap: 20px;
/* height: calc(100vh - 44px); 已通过 style 动态绑定 */
overflow: hidden; /* 防止整体滚动 */
overflow: hidden;
}
/* 左侧一级分类 */
.primary-category {
width: 120px;
height: 100%; /* 占满父容器高度 */
margin-right: 20px; /* gap replacement */
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 {
@@ -716,7 +725,7 @@ const onScan = () => {
padding: 12px 8px;
margin: 4px 8px;
border-radius: 8px;
cursor: pointer;
/* cursor: pointer; removed for uniapp-x support */
transition: all 0.2s ease;
color: #666;
text-align: center;
@@ -736,13 +745,13 @@ const onScan = () => {
margin-bottom: 6px;
margin-right: 0; /* 移除右边距 */
text-align: center;
display: block;
/* display: block; removed for uniapp-x support */
}
.primary-name {
font-size: 13px;
line-height: 1.4;
display: block;
/* display: block; removed for uniapp-x support */
}
/* 右侧内容区 */
@@ -750,14 +759,13 @@ const onScan = () => {
flex: 1;
height: 100%; /* 占满父容器高度 */
padding: 0; /* 移除内边距，交给内部元素 */
overflow-y: auto; /* 允许内部滚动 */
}
.category-header {
margin-bottom: 16px;
padding: 16px 8px 0 8px;
position: sticky;
top: 0;
/* position: sticky; REMOVED for uniapp-x support */
/* top: 0; */
background-color: #f8fafc;
z-index: 10;
}
@@ -776,19 +784,27 @@ const onScan = () => {
/* 商品网格 */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); REMOVED for uniapp-x support */
/* gap: 20px; removed for compatibility */
padding: 10px; /* add padding to compensate */
width: 100%;
}
.product-card {
background: white;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
/* cursor: pointer; removed for uniapp-x support */
transition: all 0.3s ease;
border: 1px solid #e0e0e0;
position: relative;
/* margin: 10px; gap replacement - moved to logic */
width: 44%; /* Decreased to 44% to ensure it fits (44 + 3 + 3 = 50%) */
margin: 3%; /* Increased margin */
box-sizing: border-box; /* Ensure border IS included in width */
}
.product-card:hover {
@@ -805,14 +821,14 @@ const onScan = () => {
font-size: 11px;
padding: 4px 12px;
border-radius: 12px;
font-weight: 600;
font-weight: 700;
z-index: 2;
}
.product-image {
width: 100%;
height: 160px;
object-fit: cover;
/* object-fit: cover; REMOVED for uniapp-x support - default behavior is often acceptable or handle via image mode */
background: white;
}
@@ -822,10 +838,10 @@ const onScan = () => {
.product-name {
font-size: 15px;
font-weight: 600;
font-weight: 700;
color: #333;
margin-bottom: 4px;
display: block;
/* display: block; REMOVED for uniapp-x support */
line-height: 1.4;
}
@@ -833,19 +849,22 @@ const onScan = () => {
font-size: 13px;
color: #666;
margin-bottom: 12px;
display: block;
/* display: block; REMOVED for uniapp-x support */
}
.price-section {
display: flex;
align-items: baseline;
gap: 8px;
flex-direction: row;
align-items: flex-end; /* changed from baseline */
/* gap: 8px; */
margin-bottom: 12px;
}
.current-price {
display: flex;
align-items: baseline;
flex-direction: row;
align-items: flex-end; /* changed from baseline */
margin-right: 8px; /* gap replacement */
}
.price-symbol {
@@ -863,7 +882,7 @@ const onScan = () => {
.original-price {
font-size: 13px;
color: #999;
text-decoration: line-through;
/* text-decoration: line-through; REMOVED for uniapp-x support */
}
.product-meta {
@@ -890,14 +909,14 @@ const onScan = () => {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
/* gap: 6px; */
background: #4CAF50;
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-weight: bold;
/* cursor: pointer; removed for uniapp-x support */
transition: all 0.2s ease;
}
@@ -907,6 +926,7 @@ const onScan = () => {
.cart-icon {
font-size: 14px;
margin-right: 6px; /* gap replacement */
}
/* 空状态 */
@@ -946,7 +966,7 @@ const onScan = () => {
}
.load-text {
display: inline-block;
/* display: inline-block; REMOVED for uniapp-x support */
padding: 8px 16px;
background: #f5f5f5;
border-radius: 20px;
@@ -956,10 +976,19 @@ const onScan = () => {
/* 小屏手机 (小于414px) */
@media screen and (max-width: 414px) {
.search-container {
padding: 0 12px;
height: 44px;
}
.search-box {
padding: 0 4px 0 12px;
margin: 0;
height: 30px;
}
.category-content {
/* flex-direction: column; 移除这一行，保持 row 布局 */
padding: 0 8px;
gap: 10px;
}
.primary-category {
@@ -967,6 +996,7 @@ const onScan = () => {
/* display: flex; 移除flex布局，保持默认 */
/* flex-wrap: wrap; 移除换行 */
padding: 8px 0;
margin-right: 10px; /* Gap replacement */
}
.primary-item {
@@ -988,10 +1018,15 @@ const onScan = () => {
}
.product-grid {
grid-template-columns: repeat(2, 1fr); /* 改为双列显示 */
gap: 8px;
/* grid-template-columns: repeat(2, 1fr); REMOVED */
/* gap: 8px; REMOVED */
padding: 0 4px 20px 4px; /* 增加底部内边距 */
}
.product-card {
width: 48%; /* 2 columns for mobile */
margin: 1%;
}
/* 手机端商品卡片极简模式 - 仿照主页样式 */
.product-spec,
@@ -1017,9 +1052,10 @@ const onScan = () => {
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* display: -webkit-box; REMOVED for support */
/* -webkit-line-clamp: 2; REMOVED for support */
/* -webkit-box-orient: vertical; REMOVED for support */
lines: 2; /* UTS text truncation */
}
.price-section {
@@ -1043,7 +1079,7 @@ const onScan = () => {
.search-container {
padding: 0 12px;
height: 55px;
height: 44px;
}
.search-box {
@@ -1057,30 +1093,45 @@ const onScan = () => {
/* 中屏手机/小平板 (415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
.search-container {
padding: 0 16px;
height: 44px;
}
.product-card {
width: 46%;
margin: 2%;
}
}
/* 平板设备 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.search-container {
padding: 0 16px;
height: 44px;
}
.product-card {
width: 30%;
margin: 1.5%;
}
}
/* 桌面端 (1025px以上) */
@media screen and (min-width: 1025px) {
.search-container {
padding: 0 16px;
height: 44px;
}
.category-content {
gap: 30px;
padding: 0 24px;
}
.primary-category {
width: 160px;
padding: 16px 0;
margin-right: 30px; /* Gap replacement */
}
.primary-item {
@@ -1116,12 +1167,14 @@ const onScan = () => {
}
.product-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
/* grid-template-columns: repeat(4, 1fr); REMOVED */
/* gap: 24px; REMOVED */
}
.product-card {
border-radius: 14px;
width: 22%; /* 4 columns */
margin: 1.5%;
}
.product-info {
@@ -1145,10 +1198,14 @@ const onScan = () => {
@media screen and (min-width: 1400px) {
.category-content {
max-width: 1600px;
gap: 40px;
/* gap: 40px; REMOVED */
padding: 0 32px;
}
.primary-category {
margin-right: 40px; /* Gap replacement */
}
.primary-category {
width: 200px;
padding: 20px 0;
@@ -1187,12 +1244,14 @@ const onScan = () => {
}
.product-grid {
grid-template-columns: repeat(5, 1fr);
gap: 28px;
/* grid-template-columns: repeat(5, 1fr); REMOVED */
/* gap: 28px; REMOVED */
}
.product-card {
border-radius: 16px;
width: 17%; /* 5 columns */
margin: 1.5%;
}
.product-image {