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

20260227-1

Browse Source
This commit is contained in:
cyh666666
2026-02-27 16:51:56 +08:00
parent b9acce6c35 b34f960624
commit df84fd8642
1526 changed files with 2457 additions and 38509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
pages/mall/consumer/index.uvue
View File

@@ -128,10 +128,10 @@
@click="switchBrand(brand)"
style="--card-color: #5785e5"
>
<image v-if="brand.logo_url" :src="brand.logo_url" mode="aspectFit" class="brand-logo" style="width: 40px; height: 40px; border-radius: 20px;" />
<view v-else class="card-icon">
<text class="card-icon-text">🏢</text>
<view class="card-icon" v-if="brand.logo_url == null || brand.logo_url == ''">
<text class="card-icon-text">{{ getBrandIcon(brand.name) }}</text>
</view>
<image v-else :src="brand.logo_url" mode="aspectFit" class="brand-logo" style="width: 40px; height: 40px; border-radius: 20px;" />
<text class="card-name">{{ brand.name }}</text>
</view>
</view>
@@ -200,38 +200,16 @@
class="product-card"
@click="navigateToProduct(product)"
>
<view class="product-badge" v-if="product.is_hot">热销</view>
<image
class="product-image"
:src="product.main_image_url"
mode="aspectFill"
/>
<view class="product-info">
<view class="product-name">{{ product.name }}</view>
<!-- spec is omitted if not available -->
<view class="price-section">
<view class="current-price">
<text class="price-symbol">¥</text>
<text class="price-value">{{ product.base_price ?? product.price ?? 0 }}</text>
</view>
<text class="original-price" v-if="product.market_price != null && product.base_price != null && product.market_price! > product.base_price!">
¥{{ product.market_price }}
</text>
</view>
<view class="product-meta">
<text class="manufacturer">{{ product.brand_name ?? product.shop_name ?? '自营' }}</text>
<view class="sales-info">
<text class="sales-count">已售{{ product.sale_count }}</text>
</view>
</view>
<view class="product-action">
<view class="cart-btn" @click.stop="addToCart(product)">
<text class="cart-icon">+</text>
<text class="cart-text">加入购物车</text>
</view>
<text class="product-name" :lines="2">{{ product.name }}</text>
<view class="product-bottom">
<text class="product-price">¥{{ product.price }}</text>
<view class="product-add-btn" @click.stop="addToCart(product)">
<text class="add-icon">+</text>
</view>
</view>
</view>
@@ -333,7 +311,7 @@ const subCategories = ref<Category[]>([])
const selectedParentCategory = ref<Category | null>(null)
const showSubCategories = ref(false)
// 排序标签类型
type SortTab = {
id: string
name: string
@@ -371,7 +349,7 @@ const healthNews = [
}
]
// 获取分类数据
// 获取一级分类数据
const loadCategories = async (): Promise<void> => {
try {
const categoriesData = await supabaseService.getParentCategories()
@@ -397,6 +375,35 @@ const loadSubCategories = async (parentId: string): Promise<void> => {
}
}
// 点击一级分类
const onParentCategoryClick = async (category: Category): Promise<void> => {
// 如果已经选中，则切换显示/隐藏二级分类
if (selectedParentCategory.value != null && selectedParentCategory.value.id === category.id) {
showSubCategories.value = !showSubCategories.value
return
}
// 选中新的分类
selectedParentCategory.value = category
showSubCategories.value = true
// 加载二级分类
await loadSubCategories(category.id)
}
// 点击二级分类
const onSubCategoryClick = (category: Category): void => {
// 跳转到分类页面
uni.setStorageSync('selectedCategory', category.id)
const timestamp = Date.now()
const randomParam = Math.random().toString(36).substring(2, 8)
const url = `/pages/mall/consumer/category?categoryId=${category.id}&name=${encodeURIComponent(category.name)}&timestamp=${timestamp}&random=${randomParam}`
uni.switchTab({
url: '/pages/mall/consumer/category'
})
}
// 获取品牌数据
const loadBrands = async (): Promise<void> => {
try {
@@ -408,6 +415,31 @@ const loadBrands = async (): Promise<void> => {
}
}
// 根据品牌名称获取图标
const getBrandIcon = (name: string): string => {
if (name == null || name === '') {
return '🏢'
}
// 常见品牌图标映射（使用数组方式避免 Object.keys 问题）
const iconKeys = ['感冒', '发烧', '咳嗽', '消炎', '维生素', '钙片', '胃药', '止痛', '过敏', '皮肤', '眼药水', '口腔', '血压', '血糖', '血脂', '保健', '养生', '减肥', '美容', '母婴', '儿童', '老人', '男性', '女性', '维生素C', '维生素D', '蛋白粉', '鱼油', '蜂胶', '阿胶', '红枣', '枸杞', '菊花', '金银花', '口罩', '消毒液', '体温计', '创可贴', '棉签']
const iconValues = ['💊', '🌡️', '😷', '🔬', '💊', '🦴', '🫁', '💉', '🌸', '🧴', '👁️', '🦷', '❤️', '🩸', '💓', '🧬', '🍵', '⚖️', '💅', '👶', '🧒', '👴', '♂️', '♀️', '🍊', '☀️', '🥛', '🐟', '🐝', '🍯', '🫘', '🌿', '🌼', '🌸', '😷', '🧴', '🌡️', '🩹', '🧺']
// 尝试精确匹配
for (let i = 0; i < iconKeys.length; i++) {
if (name === iconKeys[i]) {
return iconValues[i]
}
}
// 尝试模糊匹配
for (let i = 0; i < iconKeys.length; i++) {
if (name.indexOf(iconKeys[i]) !== -1) {
return iconValues[i]
}
}
// 默认返回品牌图标
return '🏢'
}
// 默认加载商品数量
const defaultLoadLimit: number = 6
@@ -648,35 +680,6 @@ const resetNavbar = () => {
lastScrollTop.value = 0
}
// 点击一级分类
const onParentCategoryClick = async (category: Category): Promise<void> => {
// 如果已经选中，则切换显示/隐藏二级分类
if (selectedParentCategory.value != null && selectedParentCategory.value.id === category.id) {
showSubCategories.value = !showSubCategories.value
return
}
// 选中新的分类
selectedParentCategory.value = category
showSubCategories.value = true
// 加载二级分类
await loadSubCategories(category.id)
}
// 点击二级分类
const onSubCategoryClick = (category: Category): void => {
// 跳转到分类页面
uni.setStorageSync('selectedCategory', category.id)
const timestamp = Date.now()
const randomParam = Math.random().toString(36).substring(2, 8)
const url = `/pages/mall/consumer/category?categoryId=${category.id}&name=${encodeURIComponent(category.name)}&timestamp=${timestamp}&random=${randomParam}`
uni.switchTab({
url: '/pages/mall/consumer/category'
})
}
// 切换分类 - 跳转到分类页面并传递分类ID
const switchCategory = (category: any) => {
console.log('=== switchCategory函数开始执行 ===')
@@ -807,35 +810,53 @@ const loadMore = async () => {
// 添加到购物车
const addToCart = async (product: any) => {
uni.showLoading({ title: '添加中...' })
uni.showLoading({ title: '检查商品...' })
try {
// 将 product 转换为 UTSJSONObject 以访问属性
const prodObj = (product instanceof UTSJSONObject) ? (product as UTSJSONObject) : (JSON.parse(JSON.stringify(product)) as UTSJSONObject)
const productId = prodObj.getString('id') ?? ''
// 尝试调用 Supabase 服务添加
const success = await supabaseService.addToCart(productId, 1, '')
if (success) {
const merchantId = prodObj.getString('merchant_id') ?? ''
// 检查商品是否有SKU
const skus = await supabaseService.getProductSkus(productId)
uni.hideLoading()
if (skus.length > 0) {
// 有规格，提示并跳转到商品详情页选择规格
uni.showToast({
title: '已添加到购物车',
icon: 'success'
})
} else {
// 失败（如未登录），回退到本地存储或提示登录
// 这里简单提示失败
uni.showToast({
title: '添加失败，请先登录',
title: '请选择规格',
icon: 'none'
})
setTimeout(() => {
uni.navigateTo({
url: '/pages/mall/consumer/product-detail?id=' + productId
})
}, 500)
} else {
// 无规格，直接加入购物车
uni.showLoading({ title: '添加中...' })
const success = await supabaseService.addToCart(productId, 1, '', merchantId)
uni.hideLoading()
if (success) {
uni.showToast({
title: '已添加到购物车',
icon: 'success'
})
} else {
uni.showToast({
title: '添加失败，请先登录',
icon: 'none'
})
}
}
} catch (e) {
console.error('添加到购物车异常', e)
uni.showToast({
title: '操作异常',
icon: 'none'
})
} finally {
uni.hideLoading()
}
uni.hideLoading()
uni.showToast({
title: '操作异常',
icon: 'none'
})
}
}
// 扫码功能
@@ -1189,14 +1210,14 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
}
.category-card {
width: 47%; /* 50 - 3 */
margin: 0 1.5% 16px 1.5%;
width: 18%; /* 一行5个 */
margin: 0 1% 12px 1%;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
padding: 10px;
background: #f8f9fa;
border-radius: 12px;
border-radius: 10px;
/* cursor: pointer; removed for uniapp-x support */
transition: all 0.3s ease;
border: 1px solid transparent;
@@ -1282,27 +1303,31 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
}
.card-icon {
width: 56px;
height: 56px;
border-radius: 28px;
width: 44px;
height: 44px;
border-radius: 22px;
background: var(--card-color, #4CAF50);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
margin-bottom: 8px;
}
.card-icon-text {
font-size: 24px;
font-size: 20px;
color: white;
}
.card-name {
font-size: 15px;
font-weight: bold;
font-size: 12px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
text-align: center;
lines: 1;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.card-desc {
@@ -1311,6 +1336,78 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
text-align: center;
}
/* 二级分类样式 */
.sub-category-grid {
background: #f8f9fa;
border-radius: 12px;
padding: 16px;
margin-top: 16px;
}
.sub-category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e0e0e0;
}
.sub-category-title {
font-size: 14px;
font-weight: bold;
color: #333;
}
.sub-category-close {
font-size: 16px;
color: #999;
padding: 4px 8px;
}
.sub-category-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.sub-category-card {
width: 23%;
background: white;
border-radius: 8px;
padding: 10px 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #eee;
margin-right: 2%;
margin-bottom: 10px;
}
.sub-category-card .card-icon {
width: 36px;
height: 36px;
border-radius: 18px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.sub-category-card .card-icon-text {
font-size: 18px;
}
.sub-category-card .card-name {
font-size: 11px;
color: #333;
text-align: center;
lines: 1;
text-overflow: ellipsis;
}
/* 健康资讯 */
.health-news {
background: white;
@@ -1513,125 +1610,62 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
}
.product-card {
/* break-inside: avoid; removed for flex layout */
width: 48%; /* Fallback for calc(50% - 5px) */
/* margin-right: 2%; Gap handled by space-between */
margin-bottom: 20px; /* 增加底部间距 */
background: #ffffff; /* 改为纯白 */
border-radius: 12px;
overflow: hidden;
/* cursor: pointer; removed for uvue support */
transition: all 0.3s ease;
border: 1px solid #eee; /* 更淡一点的边框 */
position: relative;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); /* 增强悬停阴影 */
}
.product-badge {
position: absolute;
top: 12px;
left: 12px;
background: #FF5722;
color: white;
font-size: 11px;
padding: 4px 12px;
border-radius: 12px;
font-weight: bold;
z-index: 2;
background: #fff;
border-radius: 8px;
overflow: hidden;
width: 48%;
margin-bottom: 12px;
}
.product-image {
width: 100%;
height: 180px; /* 默认稍微高一点 */
background: #f8f9fa;
}
.product-info {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1; /* 撑开剩余空间 */
height: 170px;
border-radius: 8px;
margin-bottom: 8px;
background: #f5f5f5;
}
.product-name {
font-size: 15px;
font-weight: bold;
font-size: 13px;
color: #333;
margin-bottom: 4px;
margin-bottom: 5px;
line-height: 1.4;
/* display: flex; removed for uniapp-x text support */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
/* display: -webkit-box; */
/* -webkit-line-clamp: 2; */
/* -webkit-box-orient: vertical; */
/* Simplified for compatibility */
display: flex;
white-space: normal;
height: 36px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 8px;
}
.product-spec {
font-size: 13px;
color: #666;
margin-bottom: 12px;
display: flex;
}
.price-section {
display: flex;
align-items: center;
/* gap: 8px; removed */
margin-bottom: 12px;
}
.current-price {
display: flex;
align-items: center;
margin-right: 8px; /* Replacement for gap */
}
.price-symbol {
font-size: 14px;
color: #FF5722;
}
.price-value {
font-size: 20px;
font-weight: bold;
color: #FF5722;
margin-left: 2px;
}
.original-price {
font-size: 13px;
color: #999;
/* text-decoration: line-through; removed for uniapp-x support */
}
.product-meta {
.product-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 12px;
margin-bottom: 12px;
padding: 0 8px 8px;
}
.manufacturer {
color: #666;
.product-price {
font-size: 15px;
color: #ff5000;
font-weight: bold;
}
.sales-count {
color: #999;
.product-add-btn {
width: 24px;
height: 24px;
background-color: #ff5000;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.product-action {
margin-top: 12px;
.add-icon {
color: #fff;
font-size: 16px;
font-weight: bold;
}
.cart-btn {