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

consumer模块完成度85%，连接服务器supabase，新建相关表

Browse Source
This commit is contained in:
cyh666666
2026-01-29 17:28:47 +08:00
parent a4fa00c935
commit ab038ec029
15 changed files with 4475 additions and 4793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,320 +111,60 @@
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import supabaseService from '@/utils/supabaseService.uts'
import type { Category, Product } from '@/utils/supabaseService.uts'
// 响应式数据
const statusBarHeight = ref(0)
const headerHeight = ref(44) // 默认头部高度
const primaryCategories = ref<any[]>([])
const productList = ref<any[]>([])
const activePrimary = ref<string>('cold')
const primaryCategories = ref<Category[]>([])
const productList = ref<Product[]>([])
const activePrimary = ref<string>('')
const cartCount = ref(3)
const hasMore = ref(true)
// 获取当前分类信息
const currentCategoryName = ref('感冒发烧')
const currentCategoryDesc = ref('解热镇痛')
const currentCategoryName = ref('')
const currentCategoryDesc = ref('')
// 页面参数
const pageParams = ref<any>({})
// 医药分类数据（与主页一致）
const medicineCategories = [
{ id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
{ id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
{ id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
{ id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
{ id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
{ id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
{ id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
{ id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
{ id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
{ id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
]
// Mock 商品数据 - 使用本地图片避免网络请求
const mockProducts = {
cold: [
{
id: 'cold1',
shopId: 'shop_001',
shopName: '修正药业官方旗舰店',
name: '布洛芬缓释胶囊',
specification: '0.3g*24粒',
price: 18.5,
originalPrice: 25.8,
image: '/static/images/default-product.png',
manufacturer: '修正药业',
sales: 2560,
badge: '热销'
},
{
id: 'cold2',
shopId: 'shop_002',
shopName: '白云山大药房',
name: '板蓝根颗粒',
specification: '10g*20袋',
price: 22.8,
originalPrice: 29.9,
image: '/static/images/default-product.png',
manufacturer: '白云山',
sales: 1890,
badge: '推荐'
},
{
id: 'cold3',
shopId: 'shop_003',
shopName: '以岭药业自营店',
name: '连花清瘟胶囊',
specification: '0.35g*36粒',
price: 42.8,
originalPrice: 48.0,
image: '/static/images/default-product.png',
manufacturer: '以岭药业',
sales: 3200,
badge: '爆款'
},
{
id: 'cold4',
shopId: 'shop_004',
shopName: '强生制药旗舰店',
name: '对乙酰氨基酚片',
specification: '0.5g*12片',
price: 8.9,
originalPrice: 12.0,
image: '/static/images/default-product.png',
manufacturer: '强生制药',
sales: 1420,
badge: '特价'
},
{
id: 'cold5',
shopId: 'shop_005',
shopName: '同仁堂大药房',
name: '感冒清热颗粒',
specification: '3g*10袋',
price: 16.5,
originalPrice: 19.9,
image: '/static/images/default-product.png',
manufacturer: '同仁堂',
sales: 980,
badge: '新品'
},
{
id: 'cold6',
shopId: 'shop_006',
shopName: '三九医药旗舰店',
name: '复方氨酚烷胺片',
specification: '10片/盒',
price: 12.8,
originalPrice: 15.0,
image: '/static/images/default-product.png',
manufacturer: '三九医药',
sales: 1650,
badge: '家庭装'
}
],
stomach: [
{
id: 'stomach1',
shopId: 'shop_006',
shopName: '三九医药旗舰店',
name: '胃康灵胶囊',
specification: '0.4g*24粒',
price: 32.8,
originalPrice: 38.5,
image: '/static/images/default-product.png',
manufacturer: '三九医药',
sales: 890,
badge: '热销'
},
{
id: 'stomach2',
shopId: 'shop_007',
shopName: '阿斯利康医药',
name: '奥美拉唑肠溶胶囊',
specification: '20mg*14粒',
price: 28.5,
originalPrice: 35.0,
image: '/static/images/default-product.png',
manufacturer: '阿斯利康',
sales: 1250,
badge: '处方药'
},
{
id: 'stomach3',
shopId: 'shop_008',
shopName: '江中制药旗舰店',
name: '健胃消食片',
specification: '0.8g*32片',
price: 15.9,
originalPrice: 19.9,
image: '/static/images/default-product.png',
manufacturer: '江中制药',
sales: 2100,
badge: '推荐'
},
{
id: 'stomach4',
shopId: 'shop_009',
shopName: '益普生大药房',
name: '蒙脱石散',
specification: '3g*10袋',
price: 18.6,
originalPrice: 22.0,
image: '/static/images/default-product.png',
manufacturer: '益普生',
sales: 1780,
badge: '止泻'
},
{
id: 'stomach5',
shopId: 'shop_010',
shopName: '西安杨森旗舰店',
name: '多潘立酮片',
specification: '10mg*30片',
price: 22.8,
originalPrice: 26.5,
image: '/static/images/default-product.png',
manufacturer: '西安杨森',
sales: 950,
badge: '促消化'
},
{
id: 'stomach6',
shopId: 'shop_011',
shopName: '拜耳医药自营店',
name: '铝碳酸镁咀嚼片',
specification: '0.5g*20片',
price: 25.9,
originalPrice: 29.9,
image: '/static/images/default-product.png',
manufacturer: '拜耳',
sales: 1320,
badge: '护胃'
}
],
pain: [
{
id: 'pain1',
shopId: 'shop_012',
shopName: '华北制药旗舰店',
name: '阿莫西林胶囊',
specification: '0.25g*24粒',
price: 28.5,
originalPrice: 35.0,
image: '/static/images/default-product.png',
manufacturer: '华北制药',
sales: 1560,
badge: '处方药'
},
{
id: 'pain2',
shopId: 'shop_013',
shopName: '诺华制药旗舰店',
name: '双氯芬酸钠缓释片',
specification: '75mg*10片',
price: 19.8,
originalPrice: 24.0,
image: '/static/images/default-product.png',
manufacturer: '诺华制药',
sales: 1280,
badge: '止痛'
},
{
id: 'pain3',
shopId: 'shop_014',
shopName: '云南白药旗舰店',
name: '云南白药胶囊',
specification: '0.25g*32粒',
price: 35.9,
originalPrice: 42.0,
image: '/static/images/default-product.png',
manufacturer: '云南白药',
sales: 2350,
badge: '经典'
},
{
id: 'pain4',
shopId: 'shop_015',
shopName: '辉瑞医药旗舰店',
name: '塞来昔布胶囊',
specification: '0.2g*10粒',
price: 48.6,
originalPrice: 55.0,
image: '/static/images/default-product.png',
manufacturer: '辉瑞',
sales: 890,
badge: '抗炎'
},
{
id: 'pain5',
shopId: 'shop_016',
shopName: '中美史克大药房',
name: '布洛芬片',
specification: '0.1g*24片',
price: 12.5,
originalPrice: 15.0,
image: '/static/images/default-product.png',
manufacturer: '中美史克',
sales: 1680,
badge: '经济装'
},
{
id: 'pain6',
shopId: 'shop_002',
shopName: '白云山大药房',
name: '头孢克肟胶囊',
specification: '0.1g*6粒',
price: 32.8,
originalPrice: 38.0,
image: '/static/images/default-product.png',
manufacturer: '广州白云山',
sales: 1120,
badge: '抗生素'
}
]
}
// 补充其他分类的默认数据（简化版）
const generateDefaultProducts = (categoryId: string) => {
const baseProducts = [
{ name: '通用药品1', price: 25.8, manufacturer: '知名药企', sales: 1200 },
{ name: '通用药品2', price: 18.5, manufacturer: '知名药企', sales: 950 },
{ name: '通用药品3', price: 32.0, manufacturer: '知名药企', sales: 1450 },
{ name: '通用药品4', price: 22.8, manufacturer: '知名药企', sales: 880 },
{ name: '通用药品5', price: 28.9, manufacturer: '知名药企', sales: 1100 },
{ name: '通用药品6', price: 19.9, manufacturer: '知名药企', sales: 920 }
]
return baseProducts.map((product, index) => ({
id: `${categoryId}${index + 1}`,
shopId: `shop_default_${categoryId}_${index}`, // 确保不同分类店铺ID不同
shopName: '平台自营大药房',
...product,
specification: '规格待定',
originalPrice: product.price * 1.2,
image: '/static/images/default-product.png',
badge: index === 0 ? '热销' : index === 1 ? '推荐' : ''
}))
}
// 生命周期
onMounted(() => {
initPage()
console.log('=== category页面onMounted被调用 ===')
// 在onMounted中只初始化页面，不处理分类参数
// 分类参数的处理交给onLoad函数，因为onLoad在页面加载时执行
console.log('onMounted中不处理分类参数，等待onLoad处理')
// 注意：这里不再默认选择分类，让onLoad函数处理分类选择
// 如果onLoad没有设置分类，则保持默认状态
onMounted(async() => {
await loadCategories()
await loadProducts()
})
// 添加加载分类的方法
const loadCategories = async () => {
const categories = await supabaseService.getCategories()
if (categories.length > 0) {
primaryCategories.value = categories
// 设置默认选中第一个分类
if (!activePrimary.value && categories[0]) {
activePrimary.value = categories[0].id
}
}
}
// 加载商品数据
const loadProducts = async () => {
if (activePrimary.value) {
const response = await supabaseService.getProductsByCategory(activePrimary.value)
productList.value = response.data
hasMore.value = response.hasmore
// 更新当前分类信息
const category = primaryCategories.value.find(cat => cat.id === activePrimary.value)
if (category) {
currentCategoryName.value = category.name
currentCategoryDesc.value = category.description
}
}
}
// 页面加载时处理参数 - 这是处理分类切换的主要入口
onLoad((options: any) => {
console.log('=== category页面onLoad被调用 ===')
@@ -478,15 +218,8 @@ onLoad((options: any) => {
}, 100)
}
} else {
console.log('⚠️ onLoad中未找到分类参数，使用默认分类')
// 默认选中第一个分类
const defaultCategory = 'cold'
console.log('默认分类:', defaultCategory)
// 无论如何都重新加载一次默认分类的数据
setTimeout(() => {
selectPrimaryCategory(defaultCategory)
}, 100)
console.log('⚠️ onLoad中未找到分类参数，将使用从数据库加载的第一个分类')
// 不再使用硬编码的默认分类，loadCategories 会设置第一个分类
}
console.log('=== category页面onLoad执行完成 ===')
@@ -566,36 +299,22 @@ onShow(() => {
console.log('=== category页面onShow执行完成 ===')
})
// 初始化页面
const initPage = () => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
// 保持与主页一致的固定高度计算，不进行动态调整
// 这样在移动端会与主页的视觉体验保持一致（主页占位符固定为44px）
headerHeight.value = 10
// 获取页面参数
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
pageParams.value = currentPage.options || {}
}
// 加载分类数据
primaryCategories.value = medicineCategories
}
// 选择一级分类
const selectPrimaryCategory = (categoryId: string) => {
const selectPrimaryCategory = async (categoryId: string) => {
console.log('=== selectPrimaryCategory函数开始执行 ===')
console.log('传入的categoryId:', categoryId)
console.log('当前时间:', Date.now())
// 验证categoryId是否有效
if (!categoryId) {
console.error('categoryId为空，使用默认分类')
categoryId = 'cold'
console.error('categoryId为空，尝试使用第一个分类')
if (primaryCategories.value.length > 0) {
categoryId = primaryCategories.value[0].id
} else {
console.error('没有可用的分类')
return
}
}
console.log('验证后的categoryId:', categoryId)
@@ -606,18 +325,18 @@ const selectPrimaryCategory = (categoryId: string) => {
console.log('更新后的activePrimary:', activePrimary.value)
// 更新当前分类信息
const category = medicineCategories.find(cat => cat.id === categoryId)
const category = primaryCategories.value.find(cat => cat.id === categoryId)
if (category) {
currentCategoryName.value = category.name
currentCategoryDesc.value = category.desc
console.log('✅ 找到分类:', category.name, '描述:', category.desc)
currentCategoryDesc.value = category.description
console.log('✅ 找到分类:', category.name, '描述:', category.description)
} else {
console.error('❌ 未找到分类ID:', categoryId, '，使用默认分类')
console.error('❌ 未找到分类ID:', categoryId, '，使用第一个分类')
// 如果找不到对应的分类，使用第一个分类
if (medicineCategories.length > 0) {
const firstCategory = medicineCategories[0]
if (primaryCategories.value.length > 0) {
const firstCategory = primaryCategories.value[0]
currentCategoryName.value = firstCategory.name
currentCategoryDesc.value = firstCategory.desc
currentCategoryDesc.value = firstCategory.description
activePrimary.value = firstCategory.id
categoryId = firstCategory.id
console.log('使用默认分类:', firstCategory.name)
@@ -626,22 +345,15 @@ const selectPrimaryCategory = (categoryId: string) => {
console.log('准备加载商品数据...')
// 加载对应商品
if (mockProducts[categoryId]) {
productList.value = mockProducts[categoryId]
console.log('✅ 加载mock商品数据成功')
console.log('分类:', categoryId)
console.log('商品数量:', mockProducts[categoryId].length)
console.log('商品列表:', mockProducts[categoryId])
} else {
productList.value = generateDefaultProducts(categoryId)
console.log('✅ 加载默认商品数据成功')
console.log('分类:', categoryId)
console.log('商品数量:', productList.value.length)
console.log('商品列表:', productList.value)
}
// 加载对应商品 - 使用 Supabase 服务
const response = await supabaseService.getProductsByCategory(categoryId)
productList.value = response.data
hasMore.value = response.hasmore
hasMore.value = true
console.log('✅ 加载商品数据成功')
console.log('分类:', categoryId)
console.log('商品数量:', response.data.length)
console.log('商品列表:', response.data)
// 验证数据是否已正确更新
console.log('数据更新验证:')
@@ -702,7 +414,7 @@ const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/searc
const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
const navigateToProduct = (product: any) => {
uni.navigateTo({
url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}`
url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}&name=${encodeURIComponent(product.name)}&image=${encodeURIComponent(product.image || '')}`
})
}
@@ -1416,4 +1128,4 @@ const onScan = () => {
font-size: 24px;
}
}
</style>
</style>