2675 lines
64 KiB
Plaintext
2675 lines
64 KiB
Plaintext
<!-- pages/mall/consumer/index.uvue -->
|
|
<template>
|
|
<view class="medic-home">
|
|
<!-- 鏅鸿兘椤堕儴瀵艰埅鏍?- 娣诲姞婊氬姩闅愯棌鏁堟灉 -->
|
|
<view
|
|
class="smart-navbar"
|
|
:style="{
|
|
paddingTop: statusBarHeight + 'px',
|
|
transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)'
|
|
}"
|
|
>
|
|
<view class="search-container">
|
|
<view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
|
|
<!-- 妯℃嫙杈撳叆妗?-->
|
|
<text class="search-placeholder">璇疯緭鍏ヨ嵂鍝佸悕绉般€佺棁鐘舵垨鍝佺墝</text>
|
|
|
|
<!-- 鎵爜鍥炬爣 -->
|
|
<view class="nav-icon-btn" @click.stop="onScan">
|
|
<text class="nav-icon">馃敵</text>
|
|
</view>
|
|
|
|
<!-- 鐩告満鍥炬爣 -->
|
|
<view class="nav-camera-btn" @click.stop="onCamera">
|
|
<text class="nav-camera-icon">馃摲</text>
|
|
</view>
|
|
|
|
<!-- 鎼滅储鎸夐挳 -->
|
|
<view class="nav-inner-search-btn" :style="{ height: '22px' }">
|
|
<text class="nav-inner-search-text">鎼滅储</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 瀵艰埅鏍忓崰浣嶇 - 绉婚櫎锛屾敼涓轰娇鐢?margin-top -->
|
|
<!-- <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view> -->
|
|
|
|
<!-- 涓诲唴瀹瑰尯 -->
|
|
<scroll-view
|
|
direction="vertical"
|
|
class="main-scroll"
|
|
refresher-enabled
|
|
:refresher-triggered="refreshing"
|
|
:lower-threshold="50"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="loadMore"
|
|
@scroll="handleScroll"
|
|
>
|
|
<!-- 鍋ュ悍璧勮杞挱 (Moved Up) -->
|
|
<!-- 鍋ュ悍璧勮杞挱 (Hidden) -->
|
|
<!--
|
|
<view class="health-news">
|
|
...
|
|
</view>
|
|
-->
|
|
|
|
<!-- 鏅鸿兘鍋ュ悍鍗＄墖 (Hidden) -->
|
|
<!-- <view class="smart-health-card" :style="{ marginTop: (statusBarHeight + 44 + 10) + 'px' }">
|
|
<view class="health-content">
|
|
<view class="health-header">
|
|
<text class="health-title">鏅鸿兘鍋ュ悍鍔╂墜</text>
|
|
<text class="health-subtitle">鏍规嵁鎮ㄧ殑鍋ュ悍鏁版嵁鎺ㄨ崘</text>
|
|
</view>
|
|
<view class="health-tips">
|
|
<text class="tip-item">馃挕 鎸夋椂鐢ㄨ嵂鎻愰啋</text>
|
|
<text class="tip-item">馃搵 鍋ュ悍璁板綍璺熻釜</text>
|
|
<text class="tip-item">馃┖ 鍦ㄧ嚎闂瘖鍜ㄨ</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 鏅鸿兘鍒嗙被缃戞牸 - 瀹屽叏鍝嶅簲寮?-->
|
|
<view class="smart-categories" :style="{ marginTop: (statusBarHeight + 44 + 10) + 'px' }">
|
|
<view class="section-header">
|
|
<view class="category-tabs-pills">
|
|
<view :class="['tab-pill', { active: categoryTab == 'category' }]" @click="categoryTab = 'category'">
|
|
<text class="tab-text">鏅鸿兘鍒嗙被</text>
|
|
</view>
|
|
<view :class="['tab-pill', { active: categoryTab == 'brand' }]" @click="categoryTab = 'brand'">
|
|
<text class="tab-text">鍝佺墝鐢勯€?/text>
|
|
</view>
|
|
</view>
|
|
<text class="section-desc">蹇€熷畾浣?/text>
|
|
</view>
|
|
<view class="category-grid" v-if="categoryTab === 'category'">
|
|
<!-- 涓€绾у垎绫?-->
|
|
<view
|
|
v-for="category in parentCategories"
|
|
:key="category.id"
|
|
class="category-card"
|
|
@click="onParentCategoryClick(category)"
|
|
:style="{ '--card-color': category.color }"
|
|
>
|
|
<view class="card-icon">
|
|
<text class="card-icon-text">{{ category.icon }}</text>
|
|
</view>
|
|
<text class="card-name">{{ category.name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 浜岀骇鍒嗙被 -->
|
|
<view v-if="categoryTab === 'category' && showSubCategories && subCategories.length > 0" class="sub-category-grid">
|
|
<view class="sub-category-header">
|
|
<text class="sub-category-title">{{ selectedParentCategory?.name }}鍒嗙被</text>
|
|
<text class="sub-category-close" @click="showSubCategories = false">鉁?/text>
|
|
</view>
|
|
<view class="sub-category-wrapper">
|
|
<view
|
|
v-for="subCat in subCategories"
|
|
:key="subCat.id"
|
|
class="sub-category-card"
|
|
@click="onSubCategoryClick(subCat)"
|
|
>
|
|
<view class="card-icon">
|
|
<text class="card-icon-text">{{ subCat.icon }}</text>
|
|
</view>
|
|
<text class="card-name">{{ subCat.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍝佺墝鍒楄〃 -->
|
|
<view class="category-grid" v-if="categoryTab === 'brand'">
|
|
<view
|
|
v-for="brand in brands"
|
|
:key="brand.id"
|
|
class="category-card"
|
|
@click="switchBrand(brand)"
|
|
style="--card-color: #5785e5"
|
|
>
|
|
<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>
|
|
|
|
</view>
|
|
|
|
<!-- 鍋ュ悍璧勮杞挱 (Original Position - Removed) -->
|
|
|
|
<!-- 鏅鸿兘鏈嶅姟鍏ュ彛 (Hidden) -->
|
|
<!-- <view class="smart-services">
|
|
<view class="services-grid">
|
|
<view class="service-card" @click="navigateToConsultation">
|
|
<view class="service-icon" style="background: #2196F3;">
|
|
<text class="service-icon-text">馃懆鈥嶁殨锔?/text>
|
|
</view>
|
|
<text class="service-name">鍦ㄧ嚎闂瘖</text>
|
|
<text class="service-desc">涓夌敳鍖荤敓鍦ㄧ嚎</text>
|
|
</view>
|
|
<view class="service-card" @click="navigateToPrescription">
|
|
<view class="service-icon" style="background: #4CAF50;">
|
|
<text class="service-icon-text">馃搵</text>
|
|
</view>
|
|
<text class="service-name">鐢靛瓙澶勬柟</text>
|
|
<text class="service-desc">鍖荤敓寮€鏂硅喘鑽?/text>
|
|
</view>
|
|
<view class="service-card" @click="navigateToOTC">
|
|
<view class="service-icon" style="background: #ff5000;">
|
|
<text class="service-icon-text">馃拪</text>
|
|
</view>
|
|
<text class="service-name">闈炲鏂硅嵂</text>
|
|
<text class="service-desc">瀹夊叏鑷富閫夎喘</text>
|
|
</view>
|
|
<view class="service-card" @click="navigateToHealthTools">
|
|
<view class="service-icon" style="background: #9C27B0;">
|
|
<text class="service-icon-text">馃┖</text>
|
|
</view>
|
|
<text class="service-name">鍋ュ悍宸ュ叿</text>
|
|
<text class="service-desc">鍋ュ悍绠＄悊鍔╂墜</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 鐑攢鑽搧涓撳尯 -->
|
|
<view class="hot-products">
|
|
<view class="section-header">
|
|
<view class="title-section">
|
|
<text class="section-icon">馃敟</text>
|
|
<text class="section-title">鐑攢鍟嗗搧</text>
|
|
</view>
|
|
<view class="sort-tabs">
|
|
<text
|
|
v-for="tab in sortTabs"
|
|
:key="tab.id"
|
|
:class="['sort-tab', { active: activeSort === tab.id }]"
|
|
@click="switchSort(tab.id)"
|
|
>
|
|
{{ tab.name }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="products-grid">
|
|
<view
|
|
v-for="product in hotProducts"
|
|
:key="product.id"
|
|
class="product-card"
|
|
@click="navigateToProduct(product)"
|
|
>
|
|
<image
|
|
class="product-image"
|
|
:src="product.main_image_url"
|
|
mode="aspectFill"
|
|
/>
|
|
<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>
|
|
</view>
|
|
<!-- 鍔犺浇鐘舵€佹彁绀?-->
|
|
<view class="load-more-status" v-if="loading || showLoadMore">
|
|
<text class="loading-text">姝ｅ湪鍔犺浇鏇村鍟嗗搧...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 瀹跺涵甯稿鑽?(Hidden) -->
|
|
<!-- <view class="family-medicine">
|
|
<view class="section-header">
|
|
<view class="title-section">
|
|
<text class="section-icon">馃彔</text>
|
|
<text class="section-title">瀹跺涵甯稿鑽?/text>
|
|
</view>
|
|
<text class="section-subtitle">瀹堟姢鍏ㄥ鍋ュ悍</text>
|
|
</view>
|
|
|
|
<view class="family-grid">
|
|
<view
|
|
v-for="item in familyItems"
|
|
:key="item.id"
|
|
class="family-item"
|
|
@click="navigateToCategory(item)"
|
|
>
|
|
<view class="family-icon" :style="{ backgroundColor: item.color }">
|
|
<text class="family-icon-text">{{ item.icon }}</text>
|
|
</view>
|
|
<text class="family-name">{{ item.name }}</text>
|
|
<text class="family-desc">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 鏅鸿兘鎺ㄨ崘妯″潡宸查殣钘?-->
|
|
|
|
<!-- 鍋ュ悍鎻愰啋 (Hidden) -->
|
|
<!-- <view class="health-reminder">
|
|
<view class="reminder-content">
|
|
<text class="reminder-icon">鈴?/text>
|
|
<view class="reminder-text">
|
|
<text class="reminder-title">鍋ュ悍鎻愰啋</text>
|
|
<text class="reminder-desc">鎮ㄦ湁1涓緟鐢ㄨ嵂鎻愰啋锛岀偣鍑绘煡鐪嬭鎯?/text>
|
|
</view>
|
|
<view class="reminder-action" @click="navigateToReminders">
|
|
<text class="action-text">鏌ョ湅</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 搴曢儴瀹夊叏鍖哄煙 -->
|
|
<view class="safe-area"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
import supabaseService from '@/utils/supabaseService.uts'
|
|
import type { Product, Category, Brand } from '@/utils/supabaseService.uts'
|
|
import { getCurrentUser } from '@/utils/store.uts'
|
|
|
|
// 鍝嶅簲寮忔暟鎹?
|
|
const statusBarHeight = ref(0)
|
|
const scrollHeight = ref(0)
|
|
const refreshing = ref(false)
|
|
const loading = ref(false)
|
|
const isFirstShow = ref(true)
|
|
const hasMore = ref(true)
|
|
const activeSort = ref('recommend') // 榛樿灞曠ず鏅鸿兘鎺ㄨ崘
|
|
const activeFilter = ref('recommend')
|
|
const currentPage = ref(1)
|
|
|
|
// 鏁版嵁婧?
|
|
const hotProducts = ref<Product[]>([])
|
|
const recommendedProducts = ref<Product[]>([])
|
|
const hotKeywords = ref<string[]>([])
|
|
|
|
// 灞忓箷灏哄妫€娴?
|
|
const isMobile = ref(false)
|
|
const showLoadMore = ref(false)
|
|
|
|
// 瀵艰埅鏍忔樉绀烘帶鍒?
|
|
const showNavbar = ref(true)
|
|
const lastScrollTop = ref(0)
|
|
const scrollThreshold = 30 // 闄嶄綆婊氬姩闃堝€硷紝浣垮叾鏇寸伒鏁?
|
|
const scrollingUp = ref(false)
|
|
|
|
// 鍒嗙被鏁版嵁 - 浠嶴upabase鑾峰彇
|
|
const categoryTab = ref<string>('category')
|
|
const categories = ref<Category[]>([])
|
|
const brands = ref<Brand[]>([])
|
|
|
|
// 涓€绾у垎绫诲拰浜岀骇鍒嗙被
|
|
const parentCategories = ref<Category[]>([])
|
|
const subCategories = ref<Category[]>([])
|
|
const selectedParentCategory = ref<Category | null>(null)
|
|
const showSubCategories = ref(false)
|
|
|
|
|
|
type SortTab = {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
// 鎺掑簭鏍囩
|
|
const sortTabs: SortTab[] = [
|
|
{ id: 'recommend', name: '鏅鸿兘鎺ㄨ崘' },
|
|
{ id: 'sales', name: '閿€閲? },
|
|
{ id: 'price', name: '浠锋牸' },
|
|
{ id: 'new', name: '鏂板搧' },
|
|
{ id: 'discount', name: '鐗逛环' }
|
|
]
|
|
|
|
|
|
// 鍋ュ悍璧勮
|
|
const healthNews = [
|
|
{
|
|
id: 'news1',
|
|
title: '绉嬪娴佹劅棰勯槻鎸囧崡锛岀瀛﹂槻鎶ゅ仴搴疯繃鍐?,
|
|
tag: '鍋ュ悍绉戞櫘',
|
|
image: 'https://picsum.photos/800/400?random=health1'
|
|
},
|
|
{
|
|
id: 'news2',
|
|
title: '瀹跺涵甯稿鑽竻鍗曪紝涓哄浜哄仴搴蜂繚椹炬姢鑸?,
|
|
tag: '瀹跺涵鐢ㄨ嵂',
|
|
image: 'https://picsum.photos/800/400?random=health2'
|
|
},
|
|
{
|
|
id: 'news3',
|
|
title: '鎱㈡€х梾绉戝绠＄悊锛屾彁楂樼敓娲昏川閲?,
|
|
tag: '鍋ュ悍绠＄悊',
|
|
image: 'https://picsum.photos/800/400?random=health3'
|
|
}
|
|
]
|
|
|
|
// 鑾峰彇涓€绾у垎绫绘暟鎹?
|
|
const loadCategories = async (): Promise<void> => {
|
|
try {
|
|
const categoriesData = await supabaseService.getParentCategories()
|
|
parentCategories.value = categoriesData
|
|
// 鍏煎鍏朵粬浣跨敤 categories 鐨勫湴鏂?
|
|
categories.value = categoriesData
|
|
console.log('涓€绾у垎绫绘暟鎹?', JSON.stringify(parentCategories.value))
|
|
} catch (error) {
|
|
console.error('鍔犺浇鍒嗙被鏁版嵁澶辫触:', error)
|
|
parentCategories.value = []
|
|
categories.value = []
|
|
}
|
|
}
|
|
|
|
// 鑾峰彇浜岀骇鍒嗙被鏁版嵁
|
|
const loadSubCategories = async (parentId: string): Promise<void> => {
|
|
try {
|
|
console.log('[loadSubCategories] 寮€濮嬪姞杞戒簩绾у垎绫? parentId:', parentId)
|
|
const subData = await supabaseService.getSubCategories(parentId)
|
|
console.log('[loadSubCategories] 鑾峰彇鍒颁簩绾у垎绫绘暟閲?', subData.length)
|
|
console.log('[loadSubCategories] 浜岀骇鍒嗙被鏁版嵁:', JSON.stringify(subData))
|
|
subCategories.value = subData
|
|
} catch (error) {
|
|
console.error('鍔犺浇瀛愬垎绫绘暟鎹け璐?', error)
|
|
subCategories.value = []
|
|
}
|
|
}
|
|
|
|
// 鐐瑰嚮涓€绾у垎绫?
|
|
const onParentCategoryClick = async (category: Category): Promise<void> => {
|
|
console.log('[onParentCategoryClick] 鐐瑰嚮涓€绾у垎绫?', category.name, 'id:', category.id)
|
|
|
|
// 妫€鏌ユ槸鍚︽湁涓€绾у垎绫绘湰韬渶瑕佽烦杞殑鎯呭喌锛堜緥濡傦細娌℃湁瀛愬垎绫伙紝鎴栬€呮湰韬氨鏄釜閾炬帴锛?
|
|
// 杩欓噷鏆傛椂鍋囪娌℃湁瀛愬垎绫绘椂璺宠浆
|
|
// 娉ㄦ剰锛氶渶瑕佸厛妫€鏌ユ槸鍚︽湁瀛愬垎绫伙紝杩欏彲鑳介渶瑕佷竴娆″紓姝ヨ姹傛垨棰勫姞杞?
|
|
// 杩欓噷绠€鍖栭€昏緫锛氱偣鍑讳竴绾у垎绫讳篃灏濊瘯璺宠浆锛屾垨鑰呭睍寮€
|
|
|
|
// 濡傛灉宸茬粡閫変腑锛屽垯鍒囨崲鏄剧ず/闅愯棌浜岀骇鍒嗙被
|
|
if (selectedParentCategory.value != null && selectedParentCategory.value.id === category.id) {
|
|
if (subCategories.value.length === 0) {
|
|
// 娌℃湁瀛愬垎绫伙紝鐩存帴璺宠浆
|
|
console.log('娌℃湁浜岀骇鍒嗙被锛岀洿鎺ヨ烦杞?)
|
|
uni.setStorageSync('selectedCategory', category.id)
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/category'
|
|
})
|
|
return
|
|
}
|
|
console.log('[onParentCategoryClick] 鍒囨崲鏄剧ず鐘舵€?)
|
|
showSubCategories.value = !showSubCategories.value
|
|
return
|
|
}
|
|
|
|
// 閫変腑鏂扮殑鍒嗙被
|
|
selectedParentCategory.value = category
|
|
showSubCategories.value = true
|
|
|
|
// 鍔犺浇浜岀骇鍒嗙被
|
|
await loadSubCategories(category.id)
|
|
|
|
// 鍔犺浇瀹屾垚鍚庡啀娆℃鏌?
|
|
if (subCategories.value.length === 0) {
|
|
console.log('鍔犺浇鍚庡彂鐜版病鏈変簩绾у垎绫伙紝鐩存帴璺宠浆')
|
|
uni.setStorageSync('selectedCategory', category.id)
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/category'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// 鐐瑰嚮浜岀骇鍒嗙被
|
|
const onSubCategoryClick = (category: Category): void => {
|
|
// 璺宠浆鍒板垎绫婚〉闈?
|
|
console.log('鍑嗗璺宠浆鍒嗙被:', category.id, category.name)
|
|
uni.setStorageSync('selectedCategory', category.id)
|
|
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/category',
|
|
success: () => {
|
|
console.log('SwitchTab 鎴愬姛')
|
|
},
|
|
fail: (err) => {
|
|
console.error('SwitchTab 澶辫触:', err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 鑾峰彇鍝佺墝鏁版嵁
|
|
const loadBrands = async (): Promise<void> => {
|
|
try {
|
|
const brandsData = await supabaseService.getBrands()
|
|
brands.value = brandsData
|
|
} catch (e) {
|
|
console.error('鍔犺浇鍝佺墝澶辫触:', e)
|
|
brands.value = []
|
|
}
|
|
}
|
|
|
|
// 鏍规嵁鍝佺墝鍚嶇О鑾峰彇鍥炬爣
|
|
const getBrandIcon = (name: string): string => {
|
|
if (name == null || name === '') {
|
|
return '馃彚'
|
|
}
|
|
// 甯歌鍝佺墝鍥炬爣鏄犲皠锛堜娇鐢ㄦ暟缁勬柟寮忛伩鍏?Object.keys 闂锛?
|
|
const iconKeys = [
|
|
'鎰熷啋', '鍙戠儳', '鍜冲椊', '娑堢値', '缁寸敓绱?, '閽欑墖', '鑳冭嵂', '姝㈢棝', '杩囨晱', '鐨偆', '鐪艰嵂姘?, '鍙ｈ厰', '琛€鍘?, '琛€绯?, '琛€鑴?, '淇濆仴', '鍏荤敓', '鍑忚偉', '缇庡', '姣嶅┐', '鍎跨', '鑰佷汉', '鐢锋€?, '濂虫€?, '缁寸敓绱燙', '缁寸敓绱燚', '铔嬬櫧绮?, '楸兼补', '铚傝兌', '闃胯兌', '绾㈡灒', '鏋告潪', '鑿婅姳', '閲戦摱鑺?, '鍙ｇ僵', '娑堟瘨娑?, '浣撴俯璁?, '鍒涘彲璐?, '妫夌',
|
|
'涔濊姖鍫?, '鍚屼粊鍫?, '浜戝崡鐧借嵂', '涓滈樋闃胯兌', '澶瀬', '姹熶腑', '涓変節', '鍗庣礌鍒惰嵂', '姹よ嚕鍊嶅仴', '鐧戒簯灞?, '淇', '钁佃姳', '鍝堣嵂', '鎵瓙姹?, '鎭掔憺', '澶嶆槦', '杈夌憺', '闃挎柉鍒╁悍', '缃楁皬', '榛樻矙涓?, '璧涜鑿?, '璇哄崕', '闆呭煿', '闆€宸?, '钂欑墰', '浼婂埄', '娴峰皵', '缇庣殑', '椋炲埄娴?, '瑗块棬瀛?, '鏉句笅', '鑻忔硦灏?, '涔濋槼', '鍗庝负', '灏忕背', '鑻规灉', '涓夋槦'
|
|
]
|
|
const iconValues = [
|
|
'馃拪', '馃尅锔?, '馃樂', '馃敩', '馃拪', '馃Υ', '馃珌', '馃拤', '馃尭', '馃Т', '馃憗锔?, '馃Ψ', '鉂わ笍', '馃└', '馃挀', '馃К', '馃嵉', '鈿栵笍', '馃拝', '馃懚', '馃', '馃懘', '鈾傦笍', '鈾€锔?, '馃崐', '鈽€锔?, '馃', '馃悷', '馃悵', '馃嵂', '馃珮', '馃尶', '馃尲', '馃尭', '馃樂', '馃Т', '馃尅锔?, '馃┕', '馃Ш',
|
|
'馃摐', '馃彌锔?, '鉀帮笍', '馃嵂', '鈽笍', '馃尶', '9锔忊儯', '馃拪', '馃挭', '鉀帮笍', '馃┕', '馃尰', '馃И', '馃殺', '馃敩', '猸?, '馃К', '馃И', '馃К', '馃拪', '馃К', '馃敩', '馃彞', '馃ィ', '馃悇', '馃', '馃彔', '鉂勶笍', '馃獟', '鈿?, '馃攱', '馃嵆', '馃', '馃摫', '馃崥', '馃崕', '馃摫'
|
|
]
|
|
|
|
// 灏濊瘯绮剧‘鍖归厤
|
|
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
|
|
|
|
// 鍓嶇疆澹版槑鍐呴儴鍔犺浇鍑芥暟
|
|
const doLoadHotProducts = async (targetLimit: number, resolve: (value: void) => void, reject: (reason?: any) => void): Promise<void> => {
|
|
try {
|
|
let products: Product[] = []
|
|
const limit = targetLimit
|
|
|
|
console.log('鍔犺浇鐑攢鍟嗗搧锛屽綋鍓嶆帓搴忔柟寮?', activeSort.value, 'limit:', limit)
|
|
|
|
switch (activeSort.value) {
|
|
case 'sales':
|
|
console.log('璋冪敤 getHotProducts')
|
|
products = await supabaseService.getHotProducts(limit)
|
|
break
|
|
case 'price':
|
|
console.log('璋冪敤 getProductsByPrice')
|
|
// 鎸変环鏍煎崌搴忥紙浠庝綆鍒伴珮锛?
|
|
products = await supabaseService.getProductsByPrice(limit, true)
|
|
break
|
|
case 'new':
|
|
console.log('璋冪敤 getProductsByNewest')
|
|
// 鎸夊垱寤烘椂闂达紝鏈€鏂扮殑鍦ㄥ墠
|
|
products = await supabaseService.getProductsByNewest(limit)
|
|
break
|
|
case 'recommend':
|
|
console.log('璋冪敤 getSmartRecommendations')
|
|
// 鏅鸿兘鎺ㄨ崘锛堝熀浜庣敤鎴锋悳绱㈠巻鍙层€佹祻瑙堝巻鍙层€佺儹閿€鍟嗗搧锛?
|
|
products = await supabaseService.getSmartRecommendations(limit)
|
|
break
|
|
case 'discount':
|
|
console.log('璋冪敤 getDiscountProducts')
|
|
// 鐗逛环鍟嗗搧锛坆adge涓?鐗逛环'锛?
|
|
products = await supabaseService.getDiscountProducts(limit)
|
|
break
|
|
default:
|
|
console.log('璋冪敤榛樿 getHotProducts')
|
|
products = await supabaseService.getHotProducts(limit)
|
|
}
|
|
|
|
console.log('鍔犺浇鍒扮殑鍟嗗搧鏁伴噺:', products.length)
|
|
if (products.length > 0) {
|
|
console.log('Sample Product Merchant IDs:')
|
|
for (let i = 0; i < Math.min(products.length, 3); i++) {
|
|
const p = products[i]
|
|
console.log(` - Product: ${p.name}, MerchantID: ${p.merchant_id}`)
|
|
}
|
|
}
|
|
hotProducts.value = products
|
|
} catch (error) {
|
|
console.error('鍔犺浇鐑攢鍟嗗搧澶辫触:', error)
|
|
hotProducts.value = []
|
|
}
|
|
}
|
|
|
|
// 鑾峰彇鐑攢鍟嗗搧锛堟牴鎹綋鍓嶆帓搴忔柟寮忥級
|
|
function loadHotProducts(targetLimit: number): Promise<void> {
|
|
return new Promise<void>((resolve, reject) => {
|
|
doLoadHotProducts(targetLimit, resolve, reject)
|
|
})
|
|
}
|
|
|
|
// 鍓嶇疆澹版槑鎺ㄨ崘鍟嗗搧鍔犺浇鍑芥暟
|
|
const doLoadRecommendedProducts = async (limit: number, resolve: (value: void) => void, reject: (reason?: any) => void): Promise<void> => {
|
|
recommendedProducts.value = await supabaseService.getRecommendedProducts(limit)
|
|
resolve()
|
|
}
|
|
|
|
// 鑾峰彇鎺ㄨ崘鍟嗗搧
|
|
function loadRecommendedProducts(limit: number): Promise<void> {
|
|
return new Promise<void>((resolve, reject) => {
|
|
doLoadRecommendedProducts(limit, resolve, reject)
|
|
})
|
|
}
|
|
|
|
// 鍔犺浇鐑悳璇?
|
|
const loadHotKeywords = async (): Promise<void> => {
|
|
try {
|
|
const keywords = await supabaseService.getHotKeywords(10)
|
|
hotKeywords.value = keywords
|
|
console.log('鍔犺浇鐑悳璇?', keywords.length, '涓?)
|
|
} catch (error) {
|
|
console.error('鍔犺浇鐑悳璇嶅け璐?', error)
|
|
hotKeywords.value = []
|
|
}
|
|
}
|
|
|
|
// 鐐瑰嚮鐑悳璇嶈繘琛屾悳绱?
|
|
const searchByKeyword = (keyword: string): void => {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(keyword)}`
|
|
})
|
|
}
|
|
|
|
// 鍒濆鍖栨暟鎹?
|
|
const initData = async () => {
|
|
// 棣栧厛纭繚鐢ㄦ埛璧勬枡宸插姞杞?
|
|
try {
|
|
await getCurrentUser()
|
|
console.log('涓婚〉鍒濆鍖栵細鐢ㄦ埛璧勬枡鍔犺浇瀹屾垚')
|
|
} catch (error) {
|
|
console.error('鍔犺浇鐢ㄦ埛璧勬枡澶辫触:', error)
|
|
}
|
|
await loadCategories()
|
|
await loadBrands()
|
|
await loadHotKeywords()
|
|
await loadHotProducts(defaultLoadLimit)
|
|
await loadRecommendedProducts(defaultLoadLimit)
|
|
}
|
|
|
|
|
|
// 瀹跺涵甯稿鑽?
|
|
const familyItems = [
|
|
{
|
|
id: 'family1',
|
|
name: '鍒涘彲璐?,
|
|
desc: '浼ゅ彛鎶ょ悊',
|
|
icon: '馃┕',
|
|
color: '#ff5000',
|
|
categoryId: 'external'
|
|
},
|
|
{
|
|
id: 'family2',
|
|
name: '浣撴俯璁?,
|
|
desc: '鍋ュ悍鐩戞祴',
|
|
icon: '馃尅锔?,
|
|
color: '#2196F3',
|
|
categoryId: 'device'
|
|
},
|
|
{
|
|
id: 'family3',
|
|
name: '娑堟瘨閰掔簿',
|
|
desc: '鐜娑堟瘨',
|
|
icon: '馃И',
|
|
color: '#4CAF50',
|
|
categoryId: 'external'
|
|
},
|
|
{
|
|
id: 'family4',
|
|
name: '鍙ｇ僵',
|
|
desc: '鏃ュ父闃叉姢',
|
|
icon: '馃樂',
|
|
color: '#607D8B',
|
|
categoryId: 'device'
|
|
},
|
|
{
|
|
id: 'family5',
|
|
name: '閫€鐑创',
|
|
desc: '鐗╃悊闄嶆俯',
|
|
icon: '馃',
|
|
color: '#00BCD4',
|
|
categoryId: 'cold'
|
|
},
|
|
{
|
|
id: 'family6',
|
|
name: '妫夌绾卞竷',
|
|
desc: '浼ゅ彛澶勭悊',
|
|
icon: '馃┕',
|
|
color: '#ff5000',
|
|
categoryId: 'external'
|
|
}
|
|
]
|
|
|
|
// 鍒濆鍖栭〉闈?
|
|
const initPage = () => {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
statusBarHeight.value = systemInfo.statusBarHeight
|
|
|
|
// 璁＄畻婊氬姩鍖哄煙楂樺害 - 涓嶅啀闇€瑕佹墜鍔ㄨ绠楋紝浣跨敤 Flex 甯冨眬鑷姩鎾戝紑
|
|
// scrollHeight.value = windowHeight - 50
|
|
|
|
// 妫€娴嬪睆骞曞昂瀵?
|
|
const screenWidth = systemInfo.screenWidth
|
|
isMobile.value = screenWidth < 768 // 灏忎簬768px涓哄皬灞忓箷
|
|
}
|
|
|
|
// 鐢熷懡鍛ㄦ湡
|
|
onMounted(() => {
|
|
initPage()
|
|
initData()
|
|
})
|
|
|
|
// 椤甸潰鏄剧ず鏃堕噸缃姸鎬?
|
|
onShow(() => {
|
|
console.log('=== index椤甸潰onShow琚皟鐢?===')
|
|
console.log('涓婚〉閲嶆柊鏄剧ず锛岄噸缃〉闈㈢姸鎬?)
|
|
|
|
// 閲嶇疆瀵艰埅鏍忔樉绀虹姸鎬?
|
|
showNavbar.value = true
|
|
lastScrollTop.value = 0
|
|
|
|
// 閲嶇疆婊氬姩浣嶇疆鍒伴《閮?
|
|
// 娉ㄦ剰锛氳繖閲屼笉鑳界洿鎺ユ搷浣渟croll-view鐨勬粴鍔ㄤ綅缃?
|
|
// 浣嗗彲浠ラ噸缃竴浜涢〉闈㈢姸鎬?
|
|
|
|
// 娉ㄦ剰锛氳繖閲屼笉鍐嶆竻闄electedCategory
|
|
// 璁╁垎绫婚〉闈㈠湪鎴愬姛璇诲彇鍚庤嚜琛屾竻闄?
|
|
// 杩欐牱鍙互纭繚鍒嗙被椤甸潰鑳芥纭鍙栧埌浼犻€掔殑鏁版嵁
|
|
|
|
// 姣忔椤甸潰鏄剧ず鏃跺皾璇曟洿鏂扮敤鎴疯祫鏂?
|
|
if (!isFirstShow.value) {
|
|
getCurrentUser().then(profile => {
|
|
if (profile != null) {
|
|
console.log('涓婚〉onShow锛氱敤鎴疯祫鏂欐洿鏂版垚鍔?)
|
|
} else {
|
|
console.log('涓婚〉onShow锛氱敤鎴疯祫鏂欎负绌猴紝鍙兘鏈櫥褰?)
|
|
}
|
|
}).catch(error => {
|
|
console.error('涓婚〉onShow锛氬姞杞界敤鎴疯祫鏂欏け璐?', error)
|
|
})
|
|
} else {
|
|
isFirstShow.value = false
|
|
console.log('涓婚〉棣栨鏄剧ず锛岃烦杩噊nShow涓殑鐢ㄦ埛璧勬枡妫€鏌ワ紝浜ょ敱initData澶勭悊')
|
|
}
|
|
|
|
console.log('=== index椤甸潰onShow鎵ц瀹屾垚 ===')
|
|
})
|
|
|
|
// 澶勭悊婊氬姩浜嬩欢
|
|
const handleScroll = (event: any) => {
|
|
const eventObj = event as UTSJSONObject
|
|
const detail = eventObj.get('detail') as UTSJSONObject
|
|
const scrollTop = detail.getNumber('scrollTop') ?? 0
|
|
const currentTime = Date.now()
|
|
|
|
// 鍒ゆ柇婊氬姩鏂瑰悜
|
|
if (scrollTop > lastScrollTop.value) {
|
|
// 鍚戜笅婊氬姩
|
|
scrollingUp.value = false
|
|
// 鍚戜笅婊氬姩瓒呰繃闃堝€兼椂闅愯棌瀵艰埅鏍?
|
|
if (scrollTop > scrollThreshold && showNavbar.value) {
|
|
showNavbar.value = false
|
|
}
|
|
} else if (scrollTop < lastScrollTop.value) {
|
|
// 鍚戜笂婊氬姩
|
|
scrollingUp.value = true
|
|
// 鍚戜笂婊氬姩鏃舵樉绀哄鑸爮
|
|
if (!showNavbar.value) {
|
|
showNavbar.value = true
|
|
}
|
|
}
|
|
|
|
// 婊氬姩鍒伴《閮ㄦ椂寮哄埗鏄剧ず瀵艰埅鏍?
|
|
if (scrollTop <= 10) {
|
|
showNavbar.value = true
|
|
}
|
|
|
|
lastScrollTop.value = scrollTop
|
|
|
|
// 璋冭瘯淇℃伅锛堝紑鍙戞椂鍙惎鐢級
|
|
// console.log(`Scroll: ${scrollTop}, ShowNavbar: ${showNavbar.value}, ScrollingUp: ${scrollingUp.value}`)
|
|
}
|
|
|
|
// 閲嶇疆瀵艰埅鏍忔樉绀虹姸鎬侊紙渚嬪鐐瑰嚮鍥炲埌椤堕儴鏃讹級
|
|
const resetNavbar = () => {
|
|
showNavbar.value = true
|
|
lastScrollTop.value = 0
|
|
}
|
|
|
|
// 鍒囨崲鍒嗙被 - 璺宠浆鍒板垎绫婚〉闈㈠苟浼犻€掑垎绫籌D
|
|
const switchCategory = (category: any) => {
|
|
console.log('=== switchCategory鍑芥暟寮€濮嬫墽琛?===')
|
|
|
|
// 灏?category 杞崲涓?UTSJSONObject 浠ヨ闂睘鎬?
|
|
const catObj = (category instanceof UTSJSONObject) ? (category as UTSJSONObject) : (JSON.parse(JSON.stringify(category)) as UTSJSONObject)
|
|
const categoryId = catObj.getString('id') ?? ''
|
|
const categoryName = catObj.getString('name') ?? ''
|
|
|
|
console.log('鍒嗙被ID:', categoryId, '鍒嗙被鍚嶇О:', categoryName)
|
|
|
|
// 浣跨敤Storage浼犻€掑弬鏁帮紝纭繚switchTab鍚庤兘琚鍙?
|
|
uni.setStorageSync('selectedCategory', categoryId)
|
|
|
|
// 鐢熸垚鍞竴鐨勬椂闂存埑鍜岄殢鏈哄弬鏁帮紝纭繚姣忔璺宠浆閮芥槸鏂扮殑椤甸潰
|
|
const timestamp = Date.now()
|
|
const randomParam = Math.random().toString(36).substring(2, 8)
|
|
|
|
// 鏋勫缓甯﹀弬鏁扮殑URL锛岀洿鎺ラ€氳繃URL浼犻€掑垎绫讳俊鎭?
|
|
const url = `/pages/mall/consumer/category?categoryId=${categoryId}&name=${encodeURIComponent(categoryName)}×tamp=${timestamp}&random=${randomParam}`
|
|
|
|
uni.switchTab({
|
|
url: '/pages/mall/consumer/category',
|
|
success: () => {
|
|
// 閫氳繃 Storage 浼犻€掑弬鏁板凡鍦ㄤ笂闈㈣缃?
|
|
console.log('璺宠浆鍒嗙被椤甸潰鎴愬姛锛宑ategoryId:', categoryId)
|
|
}
|
|
})
|
|
}
|
|
|
|
const switchBrand = (brand: Brand) => {
|
|
// 鍋囪璺宠浆鍒版悳绱㈢粨鏋滈〉鎴栬€呭垎绫婚〉甯?filter
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(brand.name)}&type=brand&brandId=${brand.id}`
|
|
})
|
|
}
|
|
|
|
// 鍒囨崲鎺掑簭
|
|
const switchSort = (sortId: string) => {
|
|
activeSort.value = sortId
|
|
hasMore.value = true // 閲嶇疆鍔犺浇鏇村鐘舵€?
|
|
// 閲嶆柊鍔犺浇鐑攢鍟嗗搧锛屾帓搴忕敱 Supabase 鏈嶅姟澶勭悊
|
|
loadHotProducts(defaultLoadLimit)
|
|
}
|
|
|
|
// 鍒囨崲绛涢€夊櫒
|
|
const switchFilter = (filterId: string) => {
|
|
activeFilter.value = filterId
|
|
// 閲嶆柊鍔犺浇鎺ㄨ崘鍟嗗搧锛岀瓫閫夌敱 Supabase 鏈嶅姟澶勭悊
|
|
loadRecommendedProducts(defaultLoadLimit)
|
|
}
|
|
|
|
// 鏌ョ湅鏂伴椈璇︽儏
|
|
const viewNewsDetail = (news: any) => {
|
|
uni.navigateTo({
|
|
url: `/pages/news/detail?id=${news.id}`
|
|
})
|
|
}
|
|
|
|
// 涓嬫媺鍒锋柊
|
|
const onRefresh = async () => {
|
|
refreshing.value = true
|
|
|
|
try {
|
|
// 閲嶆柊鍔犺浇鏁版嵁
|
|
await initData()
|
|
} catch (e) {
|
|
console.error('鍒锋柊鏁版嵁澶辫触:', e)
|
|
} finally {
|
|
// 寤惰繜鍏抽棴鍒锋柊鍔ㄧ敾锛岀‘淇濈敤鎴疯兘鐪嬪埌鍒锋柊杩囩▼
|
|
setTimeout(() => {
|
|
refreshing.value = false
|
|
// 寤惰繜鏄剧ず鎻愮ず锛岄伩鍏嶄笌鍔ㄧ敾鍐茬獊
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '鍒锋柊鎴愬姛',
|
|
icon: 'success'
|
|
})
|
|
}, 200)
|
|
}, 800)
|
|
}
|
|
}
|
|
|
|
// 鍔犺浇鏇村
|
|
const loadMore = async () => {
|
|
console.log('=== 瑙﹀彂瑙﹀簳浜嬩欢 ===')
|
|
if (loading.value) {
|
|
console.log('姝ｅ湪鍔犺浇涓紝璺宠繃')
|
|
return
|
|
}
|
|
|
|
showLoadMore.value = true
|
|
loading.value = true
|
|
try {
|
|
// 鑾峰彇褰撳墠鐑攢鍟嗗搧鐨勬暟閲?
|
|
const currentCount = hotProducts.value.length
|
|
const nextLimit = currentCount + 6
|
|
|
|
console.log('寮€濮嬪姞杞芥洿澶氾紝褰撳墠鏁伴噺:', currentCount, '鐩爣鏁伴噺:', nextLimit)
|
|
|
|
// 鍔犺浇鏇村鐑攢鍟嗗搧
|
|
await loadHotProducts(nextLimit)
|
|
|
|
// 妫€鏌ユ槸鍚﹁繕鏈夋洿澶氭暟鎹?
|
|
if (hotProducts.value.length === currentCount) {
|
|
hasMore.value = false
|
|
uni.showToast({
|
|
title: '娌℃湁鏇村浜?,
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
// 杩樻湁鏁版嵁锛屾垨鑰呮槸鍒氬姞杞戒簡涓€鎵?
|
|
/* uni.showToast({
|
|
title: '鍔犺浇瀹屾垚',
|
|
icon: 'success'
|
|
}) */
|
|
}
|
|
} catch (error) {
|
|
console.error('鍔犺浇鏇村澶辫触:', error)
|
|
} finally {
|
|
loading.value = false
|
|
// 绋嶅井寤惰繜闅愯棌鍔犺浇鏉★紝璁╃敤鎴风湅鍒?
|
|
setTimeout(() => {
|
|
showLoadMore.value = false
|
|
}, 500)
|
|
}
|
|
}
|
|
|
|
// 娣诲姞鍒拌喘鐗╄溅
|
|
const addToCart = async (product: any) => {
|
|
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') ?? ''
|
|
const merchantId = prodObj.getString('merchant_id') ?? ''
|
|
|
|
// 妫€鏌ュ晢鍝佹槸鍚︽湁SKU
|
|
const skus = await supabaseService.getProductSkus(productId)
|
|
uni.hideLoading()
|
|
|
|
if (skus.length > 0) {
|
|
// 鏈夎鏍硷紝鎻愮ず骞惰烦杞埌鍟嗗搧璇︽儏椤甸€夋嫨瑙勬牸
|
|
uni.showToast({
|
|
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.hideLoading()
|
|
uni.showToast({
|
|
title: '鎿嶄綔寮傚父',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 鎵爜鍔熻兘
|
|
const onScan = (): void => {
|
|
uni.scanCode({
|
|
success: (res) => {
|
|
console.log('鎵爜鎴愬姛:', res)
|
|
uni.showToast({
|
|
title: '鎵爜鎴愬姛: ' + res.result,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.error('鎵爜澶辫触:', err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 鐩告満鍔熻兘
|
|
const onCamera = (): void => {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sourceType: ['camera'],
|
|
success: (res) => {
|
|
console.log('鐩告満鎷嶆憚鎴愬姛:', res.tempFilePaths[0])
|
|
uni.showToast({
|
|
title: '宸叉媿鎽勶紝姝ｅ湪璇嗗埆...',
|
|
icon: 'loading'
|
|
})
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: '璇嗗埆鎴愬姛',
|
|
icon: 'success'
|
|
})
|
|
}, 1000)
|
|
},
|
|
fail: (err) => {
|
|
console.error('鐩告満璋冪敤澶辫触:', err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 瀵艰埅鍑芥暟
|
|
const navigateToSearch = (): void => { uni.navigateTo({ url: '/pages/mall/consumer/search' }) }
|
|
const navigateToNews = (): void => { uni.navigateTo({ url: '/pages/news/list' }) }
|
|
const navigateToProduct = (product: any) => {
|
|
// 灏?product 杞崲涓?UTSJSONObject 浠ヨ闂睘鎬?
|
|
const prodObj = (product instanceof UTSJSONObject) ? (product as UTSJSONObject) : (JSON.parse(JSON.stringify(product)) as UTSJSONObject)
|
|
|
|
// 浣跨敤productId锛堝鏋滃瓨鍦級浣滀负璺宠浆鐨勫晢鍝両D锛屽惁鍒欎娇鐢╥d
|
|
const productId = prodObj.getString('productId') ?? prodObj.getString('id') ?? ''
|
|
const name = prodObj.getString('name') ?? ''
|
|
// 浣跨敤 main_image_url
|
|
const image = prodObj.getString('main_image_url') ?? prodObj.getString('image') ?? '/static/product1.jpg'
|
|
const price = (prodObj.getNumber('base_price') ?? prodObj.getNumber('price') ?? 0).toString()
|
|
const marketPrice = prodObj.getNumber('market_price') ?? prodObj.getNumber('original_price') ?? (parseFloat(price) * 1.2)
|
|
const originalPrice = marketPrice.toString()
|
|
|
|
// 鎵嬪姩鏋勫缓URL锛岄伩鍏嶅弻閲嶇紪鐮侀棶棰?
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/product-detail?id=${productId}&price=${price}&originalPrice=${originalPrice}&name=${encodeURIComponent(name)}&image=${encodeURIComponent(image)}`
|
|
})
|
|
}
|
|
const navigateToCategory = (item: any) => {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(item.name)}&type=family`
|
|
})
|
|
}
|
|
const navigateToConsultation = () => uni.navigateTo({ url: '/pages/medicine/consultation' })
|
|
const navigateToPrescription = () => uni.navigateTo({ url: '/pages/medicine/prescription' })
|
|
const navigateToOTC = () => uni.navigateTo({ url: '/pages/medicine/otc' })
|
|
const navigateToHealthTools = () => uni.navigateTo({ url: '/pages/medicine/tools' })
|
|
const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' })
|
|
</script>
|
|
|
|
<style>
|
|
/* 鍏ㄥ眬閲嶇疆 removed - uniapp-x does not support * selector */
|
|
/* .medic-home * {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
} */
|
|
|
|
.medic-home {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #f8fafc;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main-scroll {
|
|
flex: 1;
|
|
height: 1px; /* 璁?flex 鐢熸晥骞跺厑璁告粴鍔?*/
|
|
width: 100%;
|
|
}
|
|
|
|
/* 鏅鸿兘瀵艰埅鏍?- 閲嶆柊璁捐甯冨眬 */
|
|
.smart-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15); /* 璋冩暣涓轰笌鍒嗙被椤典竴鑷?*/
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
/* will-change: transform, opacity; removed for uniapp-x support */
|
|
/* pointer-events: auto; */
|
|
/* backface-visibility: hidden; */
|
|
/* -webkit-backface-visibility: hidden; */
|
|
}
|
|
|
|
/* 瀵艰埅鏍忔悳绱㈡瀹瑰櫒鍐呰竟璺濊皟鏁?*/
|
|
.search-container {
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 鎼滅储妗?hover 鏁堟灉 */
|
|
.search-box:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 瀵艰埅鏍忔悳绱㈡瀹瑰櫒鍐呰竟璺濊皟鏁?*/
|
|
.search-box {
|
|
flex: 1;
|
|
max-width: 600px;
|
|
background: #f0f0f0;
|
|
border-radius: 20px;
|
|
padding: 0 4px 0 12px;
|
|
display: flex;
|
|
flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
|
|
align-items: center;
|
|
/* cursor: pointer; removed for uniapp-x support */
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
height: 32px; /* 鍑忓皬楂樺害锛屼笌椤堕儴楂樺害44px閫傞厤锛岀暐灏忎簬椤堕儴楂樺害 */
|
|
}
|
|
|
|
.search-placeholder {
|
|
font-size: 14px;
|
|
color: #999;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav-icon-btn {
|
|
padding: 4px 8px 4px 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid #ddd;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 鎼滅储鎸夐挳楂樺害寰皟 */
|
|
.nav-inner-search-btn {
|
|
padding: 0 12px; /* 鍑忓皬鍐呰竟璺?*/
|
|
background-color: #87CEEB; /* 澶╃┖钃?*/
|
|
border-radius: 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 24px; /* 闅忔悳绱㈡楂樺害鍑忓皬鑰屽噺灏?*/
|
|
}
|
|
|
|
.nav-inner-search-text {
|
|
font-size: 12px; /* 瀛椾綋绋嶅井鍙樺皬 */
|
|
color: #ffffff;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* 瀵艰埅鏍忓崰浣嶇 */
|
|
.navbar-placeholder {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-camera-btn {
|
|
padding: 4px 8px 4px 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right-width: 1px;
|
|
border-right-style: solid;
|
|
border-right-color: #ddd;
|
|
border-right: 1px solid #ddd; /* 淇UVUE鏍峰紡 */
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.nav-camera-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* 涓诲唴瀹瑰尯鍩?*/
|
|
.main-scroll {
|
|
flex: 1;
|
|
padding: 0 16px 16px;
|
|
max-width: 1400px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 鏅鸿兘鍋ュ悍鍗＄墖 */
|
|
.smart-health-card {
|
|
background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
/* margin-top 鐢?style 鍔ㄦ€佹帶鍒?*/
|
|
color: white;
|
|
}
|
|
|
|
.health-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* gap: 12px; removed for uniapp-x support */
|
|
}
|
|
|
|
.health-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* gap: 4px; removed for uniapp-x support */
|
|
margin-bottom: 12px; /* acts as gap for health-content */
|
|
}
|
|
|
|
.health-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px; /* acts as gap for health-header */
|
|
}
|
|
|
|
.health-subtitle {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.health-tips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
/* gap: 12px; removed for uniapp-x support */
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.tip-item {
|
|
font-size: 13px;
|
|
padding: 6px 12px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 20px;
|
|
/* backdrop-filter: blur(10px); removed for uniapp-x support */
|
|
margin-right: 12px;
|
|
margin-bottom: 12px; /* acts as gap for health-tips */
|
|
}
|
|
|
|
/* 鏅鸿兘鍒嗙被缃戞牸 */
|
|
.smart-categories {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.category-tabs-pills {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #f0f2f5;
|
|
padding: 3px;
|
|
border-radius: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-pill {
|
|
padding: 6px 18px;
|
|
border-radius: 17px;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tab-pill.active {
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 14px;
|
|
color: #888;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tab-pill.active .tab-text {
|
|
color: #4CAF50;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #666;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.section-title.active {
|
|
color: #4CAF50;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 鍒嗙被缃戞牸甯冨眬 */
|
|
.category-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure items are in row */
|
|
flex-wrap: wrap;
|
|
/* gap: 16px; removed for uniapp-x support */
|
|
margin: 0 -1.5%;
|
|
}
|
|
|
|
.category-card {
|
|
width: 18%; /* 涓€琛?涓?*/
|
|
margin: 0 1% 12px 1%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
/* cursor: pointer; removed for uniapp-x support */
|
|
transition: all 0.3s ease;
|
|
border: 1px solid transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--card-color, #4CAF50);
|
|
}
|
|
|
|
/* 浜岀骇鍒嗙被鏍峰紡 */
|
|
.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;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
background: var(--card-color, #4CAF50);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card-icon-text {
|
|
font-size: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.card-name {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
text-align: center;
|
|
width: 100%;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 12px;
|
|
color: #666;
|
|
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;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.news-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.news-more {
|
|
font-size: 14px;
|
|
color: #4CAF50;
|
|
/* cursor: pointer; removed for uvue support */
|
|
}
|
|
|
|
.news-swiper {
|
|
height: 200px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.news-content {
|
|
position: relative;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.news-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.news-caption {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
}
|
|
|
|
/* 鏅鸿兘鏈嶅姟 */
|
|
.smart-services {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.services-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure items are in row */
|
|
flex-wrap: wrap;
|
|
/* gap: 20px; removed for uniapp-x support */
|
|
margin: 0 -1.5%;
|
|
}
|
|
|
|
.service-card {
|
|
width: 47%; /* 50 - 3 */
|
|
margin: 0 1.5% 20px 1.5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.service-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.service-icon-text {
|
|
font-size: 28px;
|
|
color: white;
|
|
}
|
|
|
|
.service-name {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.service-desc {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 鐑悳璇嶅尯鍩?*/
|
|
.hot-keywords-section {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.keywords-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.keyword-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
background: #f5f5f5;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.keyword-item:hover {
|
|
background: #fff0f0;
|
|
}
|
|
|
|
.keyword-rank {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #999;
|
|
background: #eee;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.keyword-rank.top-three {
|
|
background: #ff4757;
|
|
color: white;
|
|
}
|
|
|
|
.keyword-text {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
/* 鐑攢鑽搧 */
|
|
.hot-products {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
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; removed */
|
|
width: 100%;
|
|
}
|
|
|
|
.section-icon {
|
|
font-size: 20px;
|
|
color: #4CAF50;
|
|
margin-right: 8px; /* Replacement for gap */
|
|
}
|
|
|
|
.sort-tabs {
|
|
display: flex;
|
|
flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
|
|
/* gap: 8px; removed */
|
|
align-items: center;
|
|
flex-wrap: wrap; /* 鍏佽鎹㈣锛屽疄鐜拌嚜閫傚簲 */
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.sort-tab {
|
|
font-size: 13px;
|
|
color: #666;
|
|
padding: 8px 12px; /* 澧炲姞宸﹀彸鍐呰竟璺?*/
|
|
border-radius: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
flex: 1; /* 鍧囧垎瀹藉害 */
|
|
min-width: 70px; /* 璁剧疆鏈€灏忓搴﹂槻姝㈣繃绐?*/
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 8px; /* Replacement for gap */
|
|
}
|
|
|
|
.sort-tab.active {
|
|
background: #4CAF50;
|
|
color: white;
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.sort-tab:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.sort-tab.active:hover {
|
|
background: #388E3C;
|
|
}
|
|
|
|
/* 浜у搧缃戞牸 */
|
|
.products-grid {
|
|
display: flex; /* 鏇挎崲 block 涓?flex */
|
|
flex-direction: row; /* 纭繚妯悜鎺掑垪 */
|
|
flex-wrap: wrap; /* 纭繚缃戞牸甯冨眬 */
|
|
/* gap: 10px; removed for uniapp-x support */
|
|
justify-content: space-between; /* use space-between instead of gap */
|
|
margin-top: 20px;
|
|
min-height: 500px; /* 纭繚鏈夎冻澶熼珮搴﹁Е鍙戞粴鍔?*/
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.product-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
width: 48%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.product-image {
|
|
width: 100%;
|
|
height: 170px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 13px;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
line-height: 1.4;
|
|
height: 36px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.product-bottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 8px 8px;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 15px;
|
|
color: #ff5000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.product-add-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #ff5000;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.add-icon {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cart-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* gap: 6px; removed */
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.cart-btn:hover {
|
|
background: #388E3C;
|
|
}
|
|
|
|
.cart-icon {
|
|
font-size: 14px;
|
|
margin-right: 6px; /* Replacement for gap */
|
|
}
|
|
|
|
.cart-text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 瀹跺涵甯稿鑽?*/
|
|
.family-medicine {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.family-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure items are in row */
|
|
flex-wrap: wrap;
|
|
/* gap: 16px; removed for uniapp-x support */
|
|
margin: 0 -1.5%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.family-item {
|
|
width: 47%; /* 50 - 3 */
|
|
margin: 0 1.5% 16px 1.5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.family-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.family-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.family-icon-text {
|
|
font-size: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.family-name {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.family-desc {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 鏅鸿兘鎺ㄨ崘 */
|
|
.smart-recommend {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.recommend-filters {
|
|
display: flex;
|
|
flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
|
|
/* gap: 8px; removed for uniapp-x support */
|
|
align-items: center;
|
|
flex-wrap: wrap; /* 鍏佽鎹㈣锛屽疄鐜拌嚜閫傚簲 */
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.filter-item {
|
|
font-size: 13px;
|
|
color: #666;
|
|
padding: 8px 12px; /* 澧炲姞宸﹀彸鍐呰竟璺?*/
|
|
border-radius: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.2s ease;
|
|
white-space: nowrap;
|
|
flex: 1; /* 鍧囧垎瀹藉害 */
|
|
min-width: 80px; /* 璁剧疆鏈€灏忓搴﹂槻姝㈣繃绐?*/
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.filter-item.active {
|
|
background: #4CAF50;
|
|
color: white;
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.filter-item:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.filter-item.active:hover {
|
|
background: #388E3C;
|
|
}
|
|
|
|
.recommend-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure items are in row */
|
|
flex-wrap: wrap;
|
|
/* gap: 20px; removed for uniapp-x support */
|
|
margin: 0 -1.5%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.recommend-product {
|
|
width: 97%; /* 1 col */
|
|
margin: 0 1.5% 20px 1.5%;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.recommend-product:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.product-image-container {
|
|
position: relative;
|
|
height: 180px;
|
|
}
|
|
|
|
.product-image-container .product-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
}
|
|
|
|
.product-tags {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
/* gap: 8px; removed */
|
|
}
|
|
|
|
.product-tag, .featured-tag {
|
|
padding: 4px 10px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.product-tag {
|
|
background: rgba(76, 175, 80, 0.9);
|
|
}
|
|
|
|
.featured-tag {
|
|
background: rgba(255, 87, 34, 0.9);
|
|
}
|
|
|
|
.product-details {
|
|
padding: 16px;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 4px;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
}
|
|
|
|
.product-specification {
|
|
font-size: 13px;
|
|
color: #666;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
}
|
|
|
|
.product-rating {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
/* gap: 8px; removed */
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
/* gap: 4px; removed */
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.star-icon {
|
|
font-size: 14px;
|
|
color: #FFC107;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.rating-value {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.reviews-count {
|
|
color: #666;
|
|
}
|
|
|
|
.product-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.add-to-cart {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
background: #4CAF50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.add-to-cart:hover {
|
|
background: #388E3C;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.cart-icon {
|
|
font-size: 16px;
|
|
color: white;
|
|
}
|
|
|
|
/* 鍋ュ悍鎻愰啋 */
|
|
.health-reminder {
|
|
background: linear-gradient(135deg, #ff5000 0%, #F57C00 100%);
|
|
border-radius: 16px;
|
|
padding: 16px 20px;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.reminder-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
/* gap: 12px; removed */
|
|
}
|
|
|
|
.reminder-icon {
|
|
font-size: 24px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.reminder-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* gap: 4px; removed */
|
|
}
|
|
|
|
.reminder-title {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.reminder-desc {
|
|
font-size: 13px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.reminder-action {
|
|
padding: 6px 16px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 20px;
|
|
/* cursor: pointer; removed for uvue support */
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.reminder-action:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 鍔犺浇鐘舵€?*/
|
|
.loading-state {
|
|
padding: 40px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid #f0f0f0;
|
|
border-top-color: #4CAF50;
|
|
border-radius: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.no-more {
|
|
padding: 30px 0;
|
|
text-align: center;
|
|
border-top: 1px solid #f0f0f0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.no-more-text {
|
|
font-size: 13px;
|
|
color: #999;
|
|
}
|
|
|
|
/* 瀹夊叏鍖哄煙 */
|
|
.safe-area {
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ===== 鍝嶅簲寮忚璁?===== */
|
|
|
|
/* 灏忓睆鎵嬫満 (灏忎簬414px) */
|
|
@media screen and (max-width: 414px) {
|
|
.search-container {
|
|
padding: 0 12px;
|
|
height: 44px;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 0 4px 0 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.main-scroll {
|
|
padding: 0 12px 12px;
|
|
}
|
|
|
|
.category-grid {
|
|
/* grid-template-columns: repeat(5, 1fr); removed for uniapp-x support */
|
|
/* gap: 8px; removed */
|
|
margin: 0 -1%;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.category-grid .category-card {
|
|
width: 18%; /* 5 cols : 20 - 2 */
|
|
margin: 0 1% 8px 1%;
|
|
padding: 8px 0;
|
|
background: transparent; /* 绉婚櫎鍗＄墖鑳屾櫙 */
|
|
box-shadow: none; /* 绉婚櫎闃村奖 */
|
|
border: none; /* 绉婚櫎杈规 */
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: none; /* 绉诲姩绔Щ闄ゆ偓鍋滄晥鏋?*/
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 44px; /* 鍑忓皬鍥炬爣灏哄 */
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.card-icon-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.card-name {
|
|
font-size: 11px; /* 鍑忓皬鏂囧瓧澶у皬 */
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
|
|
.card-desc {
|
|
display: none; /* 鎵嬫満绔殣钘忔弿杩版枃瀛楋紝淇濇寔鐣岄潰鏁存磥 */
|
|
}
|
|
|
|
.services-grid .service-card {
|
|
width: 23%; /* 4 cols */
|
|
margin: 0 1% 8px 1%;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 10px 4px;
|
|
background: #f8f9fa; /* 淇濇寔娣¤壊鑳屾櫙 */
|
|
}
|
|
|
|
.service-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.service-icon-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.service-name {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.service-desc {
|
|
display: none; /* 闅愯棌鎻忚堪 */
|
|
}
|
|
|
|
.load-more-status {
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.loading-text {
|
|
color: #888;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.products-grid {
|
|
/* column-count: 2; removed for flex */
|
|
/* column-gap: 8px; removed */
|
|
}
|
|
|
|
.recommend-grid .recommend-product {
|
|
width: 48%;
|
|
margin: 0 1% 8px 1%;
|
|
}
|
|
|
|
.product-info,
|
|
.product-details {
|
|
padding: 6px; /* 鏋佸皬鍐呰竟璺?*/
|
|
}
|
|
|
|
.product-name,
|
|
.product-title {
|
|
font-size: 13px; /* 璋冩暣瀛椾綋澶у皬 */
|
|
height: 36px; /* 闄愬埗楂樺害锛岄槻姝㈠弬宸笉榻?*/
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* display: webkit-box removed for compatibility */
|
|
display: flex;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.product-image,
|
|
.product-image-container {
|
|
height: 140px; /* 绋嶅井鍑忓皬鍥剧墖楂樺害閫傞厤鍙屽垪 */
|
|
}
|
|
|
|
/* 鎵嬫満绔晢鍝佸崱鐗囨瀬绠€妯″紡锛堢儹閿€ & 鎺ㄨ崘锛?*/
|
|
.hot-products .product-spec,
|
|
.hot-products .manufacturer,
|
|
.hot-products .original-price,
|
|
.hot-products .cart-text,
|
|
.hot-products .sales-info,
|
|
.hot-products .product-action, /* 闅愯棌鐑攢鍖哄姞璐寜閽?*/
|
|
.smart-recommend .product-specification,
|
|
.smart-recommend .product-rating,
|
|
.smart-recommend .original-price,
|
|
.smart-recommend .product-actions /* 闅愯棌鎺ㄨ崘鍖哄姞璐寜閽?*/
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.hot-products .product-info,
|
|
.smart-recommend .product-details {
|
|
padding: 6px; /* 鏋佸皬鍐呰竟璺?*/
|
|
}
|
|
|
|
.hot-products .product-image,
|
|
.hot-products .product-image-container,
|
|
.smart-recommend .product-image,
|
|
.smart-recommend .product-image-container {
|
|
height: 110px; /* 杩涗竴姝ュ噺灏忓浘鐗囬珮搴?*/
|
|
}
|
|
|
|
.hot-products .product-name,
|
|
.smart-recommend .product-title {
|
|
margin-bottom: 2px;
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
height: 32px; /* 闄愬埗2琛岄珮搴?*/
|
|
}
|
|
|
|
.hot-products .price-section,
|
|
.smart-recommend .price-section {
|
|
margin-bottom: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.hot-products .price-symbol,
|
|
.smart-recommend .price-symbol {
|
|
font-size: 10px;
|
|
color: #ff5000;
|
|
}
|
|
|
|
.hot-products .price-value,
|
|
.smart-recommend .price-value {
|
|
font-size: 14px; /* 瀛椾綋鍙樺皬 */
|
|
font-weight: bold;
|
|
}
|
|
|
|
.family-grid .family-item {
|
|
width: 23%; /* 4 cols */
|
|
margin: 0 1% 8px 1%;
|
|
padding: 8px 4px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
|
|
|
|
.family-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.family-icon-text {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.family-name {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.family-desc {
|
|
display: none;
|
|
}
|
|
|
|
.news-swiper {
|
|
height: 160px;
|
|
}
|
|
|
|
.sort-tabs,
|
|
.recommend-filters {
|
|
/* gap: 8px; removed */
|
|
justify-content: flex-start; /* 淇濇寔宸﹀榻?*/
|
|
/* overflow-x: auto; REMOVED for uniapp-x support - use generic view wrapping instead */
|
|
/* flex-wrap: nowrap; REMOVED to allow wrapping on mobile since overflow-x not supported on view */
|
|
padding-bottom: 4px; /* 婊氬姩鏉＄┖闂?*/
|
|
}
|
|
|
|
.sort-tab,
|
|
.filter-item {
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
flex-shrink: 0; /* 闃叉琚帇缂?*/
|
|
min-width: 0; /* CHANGED from auto to 0 */
|
|
flex: 0 0 auto; /* 鍙栨秷鍧囧垎 */
|
|
margin-right: 8px;
|
|
margin-bottom: 8px; /* Added spacing for wrapped items */
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
/* gap: 12px; removed */
|
|
}
|
|
|
|
.title-section {
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sort-tabs,
|
|
.recommend-filters {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 涓睆鎵嬫満/灏忓钩鏉?(415px-768px) */
|
|
@media screen and (min-width: 415px) and (max-width: 768px) {
|
|
.search-container {
|
|
padding: 0 16px;
|
|
height: 44px;
|
|
}
|
|
|
|
.main-scroll {
|
|
/* 绉婚櫎 margin-top */
|
|
}
|
|
|
|
.category-grid .category-card {
|
|
width: 30.33%;
|
|
}
|
|
|
|
.services-grid .service-card {
|
|
width: 47%;
|
|
}
|
|
|
|
.products-grid {
|
|
/* column-count: 2; removed */
|
|
}
|
|
|
|
.recommend-grid .recommend-product {
|
|
width: 47%;
|
|
}
|
|
|
|
.family-grid .family-item {
|
|
width: 30.33%;
|
|
}
|
|
|
|
.sort-tabs,
|
|
.recommend-filters {
|
|
/* gap: 10px; removed */
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.sort-tab,
|
|
.filter-item {
|
|
padding: 6px 14px;
|
|
font-size: 12px;
|
|
flex-grow: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
/* gap: 12px; removed */
|
|
}
|
|
|
|
.title-section {
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sort-tabs,
|
|
.recommend-filters {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 骞虫澘璁惧 (769px-1024px) */
|
|
@media screen and (min-width: 769px) and (max-width: 1024px) {
|
|
.search-container {
|
|
padding: 0 24px;
|
|
height: 44px;
|
|
}
|
|
|
|
.nav-search-tools .nav-tool-item {
|
|
display: none;
|
|
}
|
|
|
|
.main-scroll {
|
|
padding: 0 24px 20px;
|
|
}
|
|
|
|
.category-grid .category-card {
|
|
width: 22%;
|
|
}
|
|
|
|
.services-grid .service-card {
|
|
width: 22%;
|
|
}
|
|
|
|
.product-card {
|
|
/* width: calc((100% - 20px) / 3); */
|
|
width: 32%; /* Fallback for calc */
|
|
/* margin-right: 1.33%; */
|
|
}
|
|
|
|
.recommend-grid .recommend-product {
|
|
width: 47%;
|
|
}
|
|
|
|
.family-grid .family-item {
|
|
width: 30.33%;
|
|
}
|
|
|
|
.news-swiper {
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
/* 妗岄潰绔?(1025px浠ヤ笂) */
|
|
@media screen and (min-width: 1025px) {
|
|
.search-container {
|
|
padding: 0 32px;
|
|
height: 44px;
|
|
}
|
|
|
|
.main-scroll {
|
|
padding: 0 32px 24px;
|
|
}
|
|
|
|
.category-grid .category-card {
|
|
width: 13.66%;
|
|
}
|
|
|
|
.services-grid .service-card {
|
|
width: 22%;
|
|
}
|
|
|
|
.product-card {
|
|
/* width: calc((100% - 30px) / 4); */
|
|
width: 23%;
|
|
/* margin-right: 2%; */
|
|
}
|
|
|
|
.recommend-grid .recommend-product {
|
|
width: 30.33%;
|
|
}
|
|
|
|
.family-grid .family-item {
|
|
width: 30.33%;
|
|
}
|
|
|
|
.news-swiper {
|
|
height: 260px;
|
|
}
|
|
}
|
|
|
|
/* 澶ф闈㈢ (1400px浠ヤ笂) */
|
|
@media screen and (min-width: 1400px) {
|
|
.category-grid {
|
|
margin-right: -24px;
|
|
}
|
|
.category-grid .category-card {
|
|
width: 17%;
|
|
margin: 0 1.5% 24px 1.5%;
|
|
}
|
|
|
|
.product-card {
|
|
/* width: calc((100% - 30px) / 4); */
|
|
width: 23%;
|
|
/* margin-right: 2%; */
|
|
}
|
|
|
|
.recommend-grid .recommend-product {
|
|
width: 22%;
|
|
}
|
|
}
|
|
|
|
/* 鏆楅粦妯″紡閫傞厤 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.medic-home {
|
|
background: #121212;
|
|
}
|
|
|
|
.smart-categories,
|
|
.health-news,
|
|
.smart-services,
|
|
.hot-products,
|
|
.family-medicine,
|
|
.smart-recommend {
|
|
background: #1e1e1e;
|
|
border-color: #333;
|
|
}
|
|
|
|
.nav-search-box {
|
|
background: rgba(30, 30, 30, 0.95);
|
|
border-color: #444;
|
|
}
|
|
|
|
.category-card,
|
|
.service-card,
|
|
.product-card,
|
|
.family-item,
|
|
.recommend-product {
|
|
background: #2d2d2d;
|
|
border-color: #444;
|
|
}
|
|
|
|
.section-title,
|
|
.card-name,
|
|
.service-name,
|
|
.product-name,
|
|
.family-name,
|
|
.product-title,
|
|
.section-desc,
|
|
.card-desc,
|
|
.service-desc,
|
|
.product-spec,
|
|
.product-specification,
|
|
.family-desc {
|
|
color: #aaa;
|
|
}
|
|
|
|
.sort-tab,
|
|
.filter-item {
|
|
background: #333;
|
|
border-color: #444;
|
|
color: #ccc;
|
|
}
|
|
|
|
.sort-tab.active,
|
|
.filter-item.active {
|
|
background: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.sort-tab:hover,
|
|
.filter-item:hover {
|
|
background: #444;
|
|
}
|
|
|
|
.sort-tab.active:hover,
|
|
.filter-item.active:hover {
|
|
background: #388E3C;
|
|
}
|
|
|
|
.nav-tool-item {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.manufacturer,
|
|
.sales-count,
|
|
.reviews-count,
|
|
.original-price {
|
|
color: #888;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|