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

consumer模块完成度95%，准备部署消费者端测试

Browse Source
This commit is contained in:
cyh666666
2026-03-05 08:45:00 +08:00
parent cceb556c62
commit 7f7f723d93
1043 changed files with 53958 additions and 3445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
pages/mall/consumer/category药品.uvue
View File

@@ -1,31 +1,31 @@
<template>
<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>
<!-- 妯℃嫙杈撳叆妗?-->
<text class="search-placeholder">璇疯緭鍏ヨ嵂鍝佸悕绉般€佺棁鐘舵垨鍝佺墝</text>
<!-- 扫码图标 -->
<!-- 鎵爜鍥炬爣 -->
<view class="nav-icon-btn" @click.stop="onScan">
<text class="nav-icon">🔳</text>
<text class="nav-icon">馃敵</text>
</view>
<!-- 相机图标 -->
<!-- 鐩告満鍥炬爣 -->
<view class="nav-camera-btn" @click.stop="onCamera">
<text class="nav-camera-icon">📷</text>
<text class="nav-camera-icon">馃摲</text>
</view>
<!-- 搜索按钮 -->
<!-- 鎼滅储鎸夐挳 -->
<view class="nav-inner-search-btn" :style="{ height: '22px' }">
<text class="nav-inner-search-text">搜索</text>
<text class="nav-inner-search-text">鎼滅储</text>
</view>
</view>
</view>
</view>
<!-- 分类内容区 -->
<!-- 鍒嗙被鍐呭鍖?-->
<view
class="category-content"
:style="{
@@ -33,7 +33,7 @@
height: `calc(100vh - ${statusBarHeight + headerHeight + 10}px)`
}"
>
<!-- 左侧一级分类 -->
<!-- 宸︿晶涓€绾у垎绫?-->
<scroll-view scroll-y class="primary-category">
<view
v-for="item in primaryCategories"
@@ -47,15 +47,15 @@
</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"
@@ -75,34 +75,34 @@
<view class="price-section">
<view class="current-price">
<text class="price-symbol">¥</text>
<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 }}
楼{{ 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>
<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>
<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>
<text class="load-text">涓婃媺鍔犺浇鏇村</text>
</view>
</scroll-view>
</view>
@@ -114,49 +114,49 @@ 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 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
@@ -165,130 +165,130 @@ const loadProducts = async () => {
}
}
// 页面加载时处理参数 - 这是处理分类切换的主要入口
// 椤甸潰鍔犺浇鏃跺鐞嗗弬鏁?- 杩欐槸澶勭悊鍒嗙被鍒囨崲鐨勪富瑕佸叆鍙?
onLoad((options: any) => {
console.log('=== category页面onLoad被调用 ===')
console.log('页面加载时间:', Date.now())
console.log('传入的options参数:', options)
console.log('当前活动分类:', activePrimary.value)
console.log('=== category椤甸潰onLoad琚皟鐢?===')
console.log('椤甸潰鍔犺浇鏃堕棿:', Date.now())
console.log('浼犲叆鐨刼ptions鍙傛暟:', options)
console.log('褰撳墠娲诲姩鍒嗙被:', activePrimary.value)
let categoryId = ''
let categoryName = ''
// 首先检查传入的options参数
// 棣栧厛妫€鏌ヤ紶鍏ョ殑options鍙傛暟
if (options && options.categoryId) {
categoryId = options.categoryId
categoryName = options.name || ''
console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
console.log('鉁?onLoad涓壘鍒板垎绫诲弬鏁?', categoryId, categoryName)
}
// 如果options中没有，尝试从getCurrentPages()获取
// 濡傛灉options涓病鏈夛紝灏濊瘯浠巊etCurrentPages()鑾峰彇
if (!categoryId) {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const pageOptions = currentPage.options || {}
console.log('从getCurrentPages()获取参数:', pageOptions)
console.log('浠巊etCurrentPages()鑾峰彇鍙傛暟:', pageOptions)
if (pageOptions.categoryId) {
categoryId = pageOptions.categoryId
categoryName = pageOptions.name || ''
console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
console.log('鉁?浠巊etCurrentPages()鎵惧埌鍒嗙被鍙傛暟:', categoryId, categoryName)
}
}
}
// 如果有找到分类ID，则选中对应的分类
// 濡傛灉鏈夋壘鍒板垎绫籌D锛屽垯閫変腑瀵瑰簲鐨勫垎绫?
if (categoryId) {
console.log('✅ 准备选中分类:', categoryId)
console.log('分类名称:', categoryName || '未指定')
console.log('鉁?鍑嗗閫変腑鍒嗙被:', categoryId)
console.log('鍒嗙被鍚嶇О:', categoryName || '鏈寚瀹?)
// 检查是否需要更新分类
// 妫€鏌ユ槸鍚﹂渶瑕佹洿鏂板垎绫?
if (activePrimary.value !== categoryId) {
console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
console.log('准备调用selectPrimaryCategory函数...')
console.log('褰撳墠鍒嗙被:', activePrimary.value, '涓庣洰鏍囧垎绫?', categoryId, '涓嶅悓锛岄渶瑕佹洿鏂?)
console.log('鍑嗗璋冪敤selectPrimaryCategory鍑芥暟...')
selectPrimaryCategory(categoryId)
} else {
console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
// 即使分类相同，也重新加载数据，确保数据是最新的
// 添加一个小的延迟，确保页面完全显示后再更新数据
console.log('褰撳墠鍒嗙被宸茬粡鏄洰鏍囧垎绫伙紝浣嗗彲鑳界敤鎴锋兂瑕佸埛鏂伴〉闈?)
console.log('褰撳墠鍒嗙被:', activePrimary.value, '鐩爣鍒嗙被:', categoryId)
// 鍗充娇鍒嗙被鐩稿悓锛屼篃閲嶆柊鍔犺浇鏁版嵁锛岀‘淇濇暟鎹槸鏈€鏂扮殑
// 娣诲姞涓€涓皬鐨勫欢杩燂紝纭繚椤甸潰瀹屽叏鏄剧ず鍚庡啀鏇存柊鏁版嵁
setTimeout(() => {
selectPrimaryCategory(categoryId)
}, 100)
}
} else {
console.log('⚠️ onLoad中未找到分类参数，将使用从数据库加载的第一个分类')
// 不再使用硬编码的默认分类，loadCategories 会设置第一个分类
console.log('鈿狅笍 onLoad涓湭鎵惧埌鍒嗙被鍙傛暟锛屽皢浣跨敤浠庢暟鎹簱鍔犺浇鐨勭涓€涓垎绫?)
// 涓嶅啀浣跨敤纭紪鐮佺殑榛樿鍒嗙被锛宭oadCategories 浼氳缃涓€涓垎绫?
}
console.log('=== category页面onLoad执行完成 ===')
console.log('=== category椤甸潰onLoad鎵ц瀹屾垚 ===')
})
// 页面显示时也检查参数，确保从其他页面返回时能正确显示
// 椤甸潰鏄剧ず鏃朵篃妫€鏌ュ弬鏁帮紝纭繚浠庡叾浠栭〉闈㈣繑鍥炴椂鑳芥纭樉绀?
onShow(() => {
console.log('=== category页面onShow被调用 ===')
console.log('页面显示时间:', Date.now())
console.log('当前活动分类:', activePrimary.value)
console.log('=== category椤甸潰onShow琚皟鐢?===')
console.log('椤甸潰鏄剧ず鏃堕棿:', Date.now())
console.log('褰撳墠娲诲姩鍒嗙被:', activePrimary.value)
// 在onShow中，我们也需要检查是否有新的参数
// 因为当从主页再次点击分类跳转过来时，可能不会触发onLoad
// 而是触发onShow
// 鍦╫nShow涓紝鎴戜滑涔熼渶瑕佹鏌ユ槸鍚︽湁鏂扮殑鍙傛暟
// 鍥犱负褰撲粠涓婚〉鍐嶆鐐瑰嚮鍒嗙被璺宠浆杩囨潵鏃讹紝鍙兘涓嶄細瑙﹀彂onLoad
// 鑰屾槸瑙﹀彂onShow
// 获取当前页面实例和参数
// 鑾峰彇褰撳墠椤甸潰瀹炰緥鍜屽弬鏁?
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const pageOptions = currentPage.options || {}
console.log('onShow中获取参数:', pageOptions)
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)
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函数...')
console.log('褰撳墠鍒嗙被:', activePrimary.value, '涓庣洰鏍囧垎绫?', categoryId, '涓嶅悓锛岄渶瑕佹洿鏂?)
console.log('鍑嗗璋冪敤selectPrimaryCategory鍑芥暟...')
selectPrimaryCategory(categoryId)
} else {
console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
// 即使分类相同，也重新加载数据，确保数据是最新的
// 添加一个小的延迟，确保页面完全显示后再更新数据
console.log('褰撳墠鍒嗙被宸茬粡鏄洰鏍囧垎绫伙紝浣嗗彲鑳界敤鎴锋兂瑕佸埛鏂伴〉闈?)
console.log('褰撳墠鍒嗙被:', activePrimary.value, '鐩爣鍒嗙被:', categoryId)
// 鍗充娇鍒嗙被鐩稿悓锛屼篃閲嶆柊鍔犺浇鏁版嵁锛岀‘淇濇暟鎹槸鏈€鏂扮殑
// 娣诲姞涓€涓皬鐨勫欢杩燂紝纭繚椤甸潰瀹屽叏鏄剧ず鍚庡啀鏇存柊鏁版嵁
setTimeout(() => {
selectPrimaryCategory(categoryId)
}, 100)
}
} else {
console.log('⚠️ onShow中未找到分类参数')
console.log('尝试从URL中解析参数...')
console.log('鈿狅笍 onShow涓湭鎵惧埌鍒嗙被鍙傛暟')
console.log('灏濊瘯浠嶶RL涓В鏋愬弬鏁?..')
// 尝试从当前页面的URL中解析参数
// 灏濊瘯浠庡綋鍓嶉〉闈㈢殑URL涓В鏋愬弬鏁?
const currentUrl = currentPage.route || ''
console.log('当前页面路由:', currentUrl)
console.log('褰撳墠椤甸潰璺敱:', currentUrl)
// 如果URL中有查询参数，尝试解析
// 濡傛灉URL涓湁鏌ヨ鍙傛暟锛屽皾璇曡В鏋?
if (currentPage.$page && currentPage.$page.fullPath) {
const fullPath = currentPage.$page.fullPath
console.log('完整路径:', fullPath)
console.log('瀹屾暣璺緞:', fullPath)
// 尝试解析查询参数
// 灏濊瘯瑙ｆ瀽鏌ヨ鍙傛暟
const queryIndex = fullPath.indexOf('?')
if (queryIndex > -1) {
const queryString = fullPath.substring(queryIndex + 1)
console.log('查询字符串:', queryString)
console.log('鏌ヨ瀛楃涓?', queryString)
// 简单解析查询参数
// 绠€鍗曡В鏋愭煡璇㈠弬鏁?
const params = new URLSearchParams(queryString)
const urlCategoryId = params.get('categoryId')
if (urlCategoryId) {
console.log('✅ 从URL解析到分类参数:', urlCategoryId)
console.log('鉁?浠嶶RL瑙ｆ瀽鍒板垎绫诲弬鏁?', urlCategoryId)
selectPrimaryCategory(urlCategoryId)
}
}
@@ -296,78 +296,78 @@ onShow(() => {
}
}
console.log('=== category页面onShow执行完成 ===')
console.log('=== category椤甸潰onShow鎵ц瀹屾垚 ===')
})
// 选择一级分类
// 閫夋嫨涓€绾у垎绫?
const selectPrimaryCategory = async (categoryId: string) => {
console.log('=== selectPrimaryCategory函数开始执行 ===')
console.log('传入的categoryId:', categoryId)
console.log('当前时间:', Date.now())
console.log('=== selectPrimaryCategory鍑芥暟寮€濮嬫墽琛?===')
console.log('浼犲叆鐨刢ategoryId:', categoryId)
console.log('褰撳墠鏃堕棿:', Date.now())
// 验证categoryId是否有效
// 楠岃瘉categoryId鏄惁鏈夋晥
if (!categoryId) {
console.error('categoryId为空，尝试使用第一个分类')
console.error('categoryId涓虹┖锛屽皾璇曚娇鐢ㄧ涓€涓垎绫?)
if (primaryCategories.value.length > 0) {
categoryId = primaryCategories.value[0].id
} else {
console.error('没有可用的分类')
console.error('娌℃湁鍙敤鐨勫垎绫?)
return
}
}
console.log('验证后的categoryId:', categoryId)
console.log('当前activePrimary的值:', activePrimary.value)
console.log('楠岃瘉鍚庣殑categoryId:', categoryId)
console.log('褰撳墠activePrimary鐨勫€?', activePrimary.value)
// 更新活动分类
// 鏇存柊娲诲姩鍒嗙被
activePrimary.value = categoryId
console.log('更新后的activePrimary:', activePrimary.value)
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)
console.log('鉁?鎵惧埌鍒嗙被:', category.name, '鎻忚堪:', category.description)
} else {
console.error('❌ 未找到分类ID:', categoryId, '，使用第一个分类')
// 如果找不到对应的分类，使用第一个分类
console.error('鉂?鏈壘鍒板垎绫籌D:', 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('浣跨敤榛樿鍒嗙被:', firstCategory.name)
}
}
console.log('准备加载商品数据...')
console.log('鍑嗗鍔犺浇鍟嗗搧鏁版嵁...')
// 加载对应商品 - 使用 Supabase 服务
// 鍔犺浇瀵瑰簲鍟嗗搧 - 浣跨敤 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('鍒嗙被:', categoryId)
console.log('鍟嗗搧鏁伴噺:', response.data.length)
console.log('鍟嗗搧鍒楄〃:', response.data)
// 验证数据是否已正确更新
console.log('数据更新验证:')
// 楠岃瘉鏁版嵁鏄惁宸叉纭洿鏂?
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('productList闀垮害:', productList.value.length)
console.log('=== selectPrimaryCategory函数执行完成 ===')
console.log('=== selectPrimaryCategory鍑芥暟鎵ц瀹屾垚 ===')
}
// 添加到购物车
// 娣诲姞鍒拌喘鐗╄溅
const addToCart = (product: any) => {
// 获取现有购物车数据
// 鑾峰彇鐜版湁璐墿杞︽暟鎹?
const cartData = uni.getStorageSync('cart')
let cartItems: any[] = []
@@ -375,41 +375,41 @@ const addToCart = (product: any) => {
try {
cartItems = JSON.parse(cartData as string) as any[]
} catch (e) {
console.error('解析购物车数据失败', 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 || '自营店铺',
shopName: product.shopName || product.manufacturer || '鑷惀搴楅摵',
name: product.name,
price: product.price,
image: product.image,
spec: product.specification || '默认规格',
spec: product.specification || '榛樿瑙勬牸',
quantity: 1,
selected: true
})
}
// 保存回存储
// 淇濆瓨鍥炲瓨鍌?
uni.setStorageSync('cart', JSON.stringify(cartItems))
uni.showToast({
title: '已添加到购物车',
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) => {
@@ -418,43 +418,43 @@ const navigateToProduct = (product: any) => {
})
}
// 相机功能
// 鐩告満鍔熻兘
const onCamera = () => {
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: (res) => {
console.log('相机拍摄成功:', res.tempFilePaths[0])
console.log('鐩告満鎷嶆憚鎴愬姛:', res.tempFilePaths[0])
uni.showToast({
title: '已拍摄，正在识别...',
title: '宸叉媿鎽勶紝姝ｅ湪璇嗗埆...',
icon: 'loading'
})
// 这里可以添加后续的识别逻辑
// 杩欓噷鍙互娣诲姞鍚庣画鐨勮瘑鍒€昏緫
setTimeout(() => {
uni.showToast({
title: '识别成功',
title: '璇嗗埆鎴愬姛',
icon: 'success'
})
}, 1000)
},
fail: (err) => {
console.error('相机调用失败:', err)
console.error('鐩告満璋冪敤澶辫触:', err)
}
})
}
// 扫码功能
// 鎵爜鍔熻兘
const onScan = () => {
uni.scanCode({
success: (res) => {
console.log('扫码成功:', res)
console.log('鎵爜鎴愬姛:', res)
uni.showToast({
title: '扫码成功: ' + res.result,
title: '鎵爜鎴愬姛: ' + res.result,
icon: 'none'
})
},
fail: (err) => {
console.error('扫码失败:', err)
console.error('鎵爜澶辫触:', err)
}
})
}
@@ -469,7 +469,7 @@ const onScan = () => {
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}
/* 搜索栏 */
/* 鎼滅储鏍?*/
.search-bar {
position: fixed;
top: 0;
@@ -480,10 +480,10 @@ const onScan = () => {
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
}
/* 搜索栏 */
/* 导航栏搜索框容器内边距调整 */
/* 鎼滅储鏍?*/
/* 瀵艰埅鏍忔悳绱㈡瀹瑰櫒鍐呰竟璺濊皟鏁?*/
.search-container {
height: 44px; /* 调整为与消息页一致的高度 */
height: 44px; /* 璋冩暣涓轰笌娑堟伅椤典竴鑷寸殑楂樺害 */
padding: 0 16px;
display: flex;
align-items: center;
@@ -493,12 +493,12 @@ const onScan = () => {
width: 100%;
}
/* 搜索框 hover 效果 */
/* 鎼滅储妗?hover 鏁堟灉 */
.search-box:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 导航栏搜索框容器内边距调整 */
/* 瀵艰埅鏍忔悳绱㈡瀹瑰櫒鍐呰竟璺濊皟鏁?*/
.search-box {
flex: 1;
max-width: 600px;
@@ -506,12 +506,12 @@ const onScan = () => {
border-radius: 20px;
padding: 0 4px 0 12px;
display: flex;
flex-direction: row; /* UVUE 显式设置 row */
flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
height: 32px; /* 减小高度，与顶部高度44px适配，略小于顶部高度 */
height: 32px; /* 鍑忓皬楂樺害锛屼笌椤堕儴楂樺害44px閫傞厤锛岀暐灏忎簬椤堕儴楂樺害 */
}
.search-placeholder {
@@ -524,7 +524,7 @@ const onScan = () => {
}
.nav-inner-search-text {
font-size: 12px; /* 字体稍微变小 */
font-size: 12px; /* 瀛椾綋绋嶅井鍙樺皬 */
color: #ffffff;
font-weight: 500;
}
@@ -557,7 +557,7 @@ const onScan = () => {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ddd;
border-right: 1px solid #ddd; /* 修复UVUE样式 */
border-right: 1px solid #ddd; /* 淇UVUE鏍峰紡 */
margin-right: 8px;
}
@@ -565,23 +565,23 @@ const onScan = () => {
font-size: 20px;
}
/* 搜索按钮高度微调 */
/* 鎼滅储鎸夐挳楂樺害寰皟 */
.nav-inner-search-btn {
padding: 0 12px; /* 减小内边距 */
background-color: #87CEEB; /* 天空蓝 */
padding: 0 12px; /* 鍑忓皬鍐呰竟璺?*/
background-color: #87CEEB; /* 澶╃┖钃?*/
border-radius: 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 24px; /* 随搜索框高度减小而减小 */
height: 24px; /* 闅忔悳绱㈡楂樺害鍑忓皬鑰屽噺灏?*/
}
.cart-badge {
position: absolute;
top: -5px;
right: -5px;
background: #FF5722;
background: #ff5000;
color: white;
font-size: 10px;
min-width: 18px;
@@ -594,36 +594,36 @@ const onScan = () => {
border: 2px solid #4CAF50;
}
/* 分类内容区 */
/* 鍒嗙被鍐呭鍖?*/
.category-content {
display: flex;
flex-direction: row; /* 强制水平排列 */
/* margin-top: 44px; 已通过 style 动态绑定 */
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; /* 防止整体滚动 */
/* height: calc(100vh - 44px); 宸查€氳繃 style 鍔ㄦ€佺粦瀹?*/
overflow: hidden; /* 闃叉鏁翠綋婊氬姩 */
}
/* 左侧一级分类 */
/* 宸︿晶涓€绾у垎绫?*/
.primary-category {
width: 120px;
height: 100%; /* 占满父容器高度 */
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; /* 允许内部滚动 */
overflow-y: auto; /* 鍏佽鍐呴儴婊氬姩 */
}
.primary-item {
display: flex;
flex-direction: column; /* 图标和文字垂直排列 */
flex-direction: column; /* 鍥炬爣鍜屾枃瀛楀瀭鐩存帓鍒?*/
align-items: center;
justify-content: center;
padding: 12px 8px;
@@ -636,7 +636,7 @@ const onScan = () => {
}
.primary-item:hover {
transform: translateY(-2px); /* 悬停时向上浮动 */
transform: translateY(-2px); /* 鎮仠鏃跺悜涓婃诞鍔?*/
}
.primary-item.active {
@@ -647,7 +647,7 @@ const onScan = () => {
.primary-icon {
font-size: 24px;
margin-bottom: 6px;
margin-right: 0; /* 移除右边距 */
margin-right: 0; /* 绉婚櫎鍙宠竟璺?*/
text-align: center;
display: block;
}
@@ -658,12 +658,12 @@ const onScan = () => {
display: block;
}
/* 右侧内容区 */
/* 鍙充晶鍐呭鍖?*/
.product-content {
flex: 1;
height: 100%; /* 占满父容器高度 */
padding: 0; /* 移除内边距，交给内部元素 */
overflow-y: auto; /* 允许内部滚动 */
height: 100%; /* 鍗犳弧鐖跺鍣ㄩ珮搴?*/
padding: 0; /* 绉婚櫎鍐呰竟璺濓紝浜ょ粰鍐呴儴鍏冪礌 */
overflow-y: auto; /* 鍏佽鍐呴儴婊氬姩 */
}
.category-header {
@@ -687,7 +687,7 @@ const onScan = () => {
color: #666;
}
/* 商品网格 */
/* 鍟嗗搧缃戞牸 */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -713,7 +713,7 @@ const onScan = () => {
position: absolute;
top: 12px;
left: 12px;
background: #FF5722;
background: #ff5000;
color: white;
font-size: 11px;
padding: 4px 12px;
@@ -763,13 +763,13 @@ const onScan = () => {
.price-symbol {
font-size: 14px;
color: #FF5722;
color: #ff5000;
}
.price-value {
font-size: 20px;
font-weight: bold;
color: #FF5722;
color: #ff5000;
margin-left: 2px;
}
@@ -822,7 +822,7 @@ const onScan = () => {
font-size: 14px;
}
/* 空状态 */
/* 绌虹姸鎬?*/
.empty-state {
display: flex;
flex-direction: column;
@@ -850,7 +850,7 @@ const onScan = () => {
color: #666;
}
/* 加载更多 */
/* 鍔犺浇鏇村 */
.load-more {
text-align: center;
padding: 20px 0;
@@ -865,29 +865,29 @@ const onScan = () => {
border-radius: 20px;
}
/* ===== 响应式设计 ===== */
/* ===== 鍝嶅簲寮忚璁?===== */
/* 小屏手机 (小于414px) */
/* 灏忓睆鎵嬫満 (灏忎簬414px) */
@media screen and (max-width: 414px) {
.category-content {
/* flex-direction: column; 移除这一行，保持 row 布局 */
/* flex-direction: column; 绉婚櫎杩欎竴琛岋紝淇濇寔 row 甯冨眬 */
padding: 0 8px;
gap: 10px;
}
.primary-category {
width: 80px; /* 减小宽度 */
/* display: flex; 移除flex布局，保持默认 */
/* flex-wrap: wrap; 移除换行 */
width: 80px; /* 鍑忓皬瀹藉害 */
/* display: flex; 绉婚櫎flex甯冨眬锛屼繚鎸侀粯璁?*/
/* flex-wrap: wrap; 绉婚櫎鎹㈣ */
padding: 8px 0;
}
.primary-item {
/* width: calc(25% - 8px); 移除百分比宽度 */
width: auto; /* 恢复自动宽度 */
/* width: calc(25% - 8px); 绉婚櫎鐧惧垎姣斿搴?*/
width: auto; /* 鎭㈠鑷姩瀹藉害 */
margin: 4px;
padding: 8px 4px;
/* text-align: center; 已经在通用样式中设置 */
/* text-align: center; 宸茬粡鍦ㄩ€氱敤鏍峰紡涓缃?*/
}
.primary-icon {
@@ -901,17 +901,17 @@ const onScan = () => {
}
.product-grid {
grid-template-columns: repeat(2, 1fr); /* 改为双列显示 */
grid-template-columns: repeat(2, 1fr); /* 鏀逛负鍙屽垪鏄剧ず */
gap: 8px;
padding: 0 4px 20px 4px; /* 增加底部内边距 */
padding: 0 4px 20px 4px; /* 澧炲姞搴曢儴鍐呰竟璺?*/
}
/* 手机端商品卡片极简模式 - 仿照主页样式 */
/* 鎵嬫満绔晢鍝佸崱鐗囨瀬绠€妯″紡 - 浠跨収涓婚〉鏍峰紡 */
.product-spec,
.manufacturer,
.original-price,
.sales-info,
.product-badge { /* 分类页也隐藏角标，保持整洁 */
.product-badge { /* 鍒嗙被椤典篃闅愯棌瑙掓爣锛屼繚鎸佹暣娲?*/
display: none;
}
@@ -920,7 +920,7 @@ const onScan = () => {
}
.product-image {
height: 100px; /* 由于分类页右侧空间更窄，图片高度设得更小一点 */
height: 100px; /* 鐢变簬鍒嗙被椤靛彸渚х┖闂存洿绐勶紝鍥剧墖楂樺害璁惧緱鏇村皬涓€鐐?*/
}
.product-name {
@@ -951,7 +951,7 @@ const onScan = () => {
}
.product-meta {
display: none; /* 隐藏整个元数据行 */
display: none; /* 闅愯棌鏁翠釜鍏冩暟鎹 */
}
.search-container {
@@ -968,7 +968,7 @@ const onScan = () => {
}
}
/* 中屏手机/小平板 (415px-768px) */
/* 涓睆鎵嬫満/灏忓钩鏉?(415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
@@ -976,7 +976,7 @@ const onScan = () => {
}
}
/* 平板设备 (769px-1024px) */
/* 骞虫澘璁惧 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
@@ -984,7 +984,7 @@ const onScan = () => {
}
}
/* 桌面端 (1025px以上) */
/* 妗岄潰绔?(1025px浠ヤ笂) */
@media screen and (min-width: 1025px) {
.category-content {
gap: 30px;
@@ -1054,7 +1054,7 @@ const onScan = () => {
}
}
/* 大桌面端 (1400px以上) */
/* 澶ф闈㈢ (1400px浠ヤ笂) */
@media screen and (min-width: 1400px) {
.category-content {
max-width: 1600px;
@@ -1129,3 +1129,4 @@ const onScan = () => {
}
}
</style>