From 9313c966ad18ae05045167c838367b7dbdf42c14 Mon Sep 17 00:00:00 2001 From: yvan <8574526@qq.com> Date: Thu, 14 Aug 2025 14:01:27 +0800 Subject: [PATCH] 1 --- pages/review/review.vue | 1012 ++++++++++++++++++++++++--------------- 1 file changed, 629 insertions(+), 383 deletions(-) diff --git a/pages/review/review.vue b/pages/review/review.vue index 4bfae5f..491f2bd 100644 --- a/pages/review/review.vue +++ b/pages/review/review.vue @@ -2,116 +2,188 @@ - - + + + 🔍 + + + ✕ + + + + 🔧 + 筛选 + - - - - - - - 全部 - - - {{ type.icon }} - {{ type.label }} + + + + + + + + 🐾 宠物类型 + + + + 全部 + + + {{ type.icon }} + {{ type.label }} + + + + + + + + 🏷️ 产品分类 + + + + 全部 + + + {{ category.label }} + + + + + + + + 🏪 品牌筛选 + + + + {{ brand }} + + + + + + + + 💰 价格区间 + + + + {{ price.label }} + + + + + + + + ⚙️ 其他条件 + + + + 排序： + + + 评分 + + + 价格 + + + 热度 + - - - - - - - 全部 - - - {{ category.label }} + + 视图： + + + 网格 + + + 列表 + - + - - - - - - 评分 + + + + 重置 - - 价格 - - - 热度 - - - - - ⊞ - - - ☰ + + 应用筛选 - - @@ -129,9 +201,9 @@ {{ product.name }} - ★ @@ -143,9 +215,9 @@ ¥{{ product.priceRange }} - {{ tag }} @@ -159,27 +231,70 @@ - - - - 🔧 - - - - - - - 品牌筛选 - - + + + + + 🐾 宠物类型 + + + + 全部 + + + {{ type.icon }} + {{ type.label }} + + + + + + + + 🏷️ 产品分类 + + + + 全部 + + + {{ category.label }} + + + + + + + + 🏪 品牌筛选 + + + - - 价格区间 - - + + + 💰 价格区间 + + + + + + + + ⚙️ 其他条件 + + + + 排序： + + + 评分 + + + 价格 + + + 热度 + + + + + 视图： + + + 网格 + + + 列表 + + + + + + + + + + 重置 + + + 应用筛选 + + - @@ -222,16 +404,16 @@ export default { const showFilter = ref(false) const selectedBrands = ref([]) const selectedPriceRange = ref('all') - + const productsList = ref([]) const favoritesList = ref([]) - + // 筛选选项数据 const petTypes = ref([ { value: 'cat', label: '猫咪', icon: '🐱' }, { value: 'dog', label: '狗狗', icon: '🐶' } ]) - + const productCategories = ref([ { value: 'food', label: '主粮' }, { value: 'snack', label: '零食' }, @@ -240,11 +422,11 @@ export default { { value: 'supplies', label: '用品' }, { value: 'health', label: '保健品' } ]) - + const brands = ref([ '皇家', '希尔斯', '渴望', '蓝氏', '冠能', '爱肯拿', '纽翠斯', '百利', '素力高', '网易严选' ]) - + const priceRanges = ref([ { value: 'all', label: '不限' }, { value: '0-50', label: '50元以下' }, @@ -253,35 +435,35 @@ export default { { value: '200-500', label: '200-500元' }, { value: '500+', label: '500元以上' } ]) - + // 计算属性 const filteredProducts = computed(() => { let filtered = productsList.value - + // 搜索筛选 if (searchKeyword.value) { const keyword = searchKeyword.value.toLowerCase() - filtered = filtered.filter(product => + filtered = filtered.filter(product => product.name.toLowerCase().includes(keyword) || product.brand.toLowerCase().includes(keyword) ) } - + // 宠物类型筛选 if (currentPetType.value !== 'all') { filtered = filtered.filter(product => product.petType === currentPetType.value) } - + // 产品类别筛选 if (currentCategory.value !== 'all') { filtered = filtered.filter(product => product.category === currentCategory.value) } - + // 品牌筛选 if (selectedBrands.value.length > 0) { filtered = filtered.filter(product => selectedBrands.value.includes(product.brand)) } - + // 价格筛选 if (selectedPriceRange.value !== 'all') { filtered = filtered.filter(product => { @@ -302,7 +484,7 @@ export default { } }) } - + // 排序 filtered.sort((a, b) => { switch (currentSort.value) { @@ -318,16 +500,16 @@ export default { return 0 } }) - + return filtered }) - + // 生命周期 onMounted(() => { loadProducts() loadFavorites() }) - + // 方法定义 const loadProducts = () => { // 模拟产品数据 @@ -417,16 +599,16 @@ export default { isFavorite: false } ] - + productsList.value = mockProducts uni.setStorageSync('reviewProducts', mockProducts) } - + const loadFavorites = () => { try { const saved = uni.getStorageSync('reviewFavorites') || [] favoritesList.value = saved - + // 更新产品收藏状态 productsList.value.forEach(product => { product.isFavorite = favoritesList.value.includes(product.id) @@ -435,35 +617,39 @@ export default { console.error('加载收藏失败:', error) } } - + const saveFavorites = () => { uni.setStorageSync('reviewFavorites', favoritesList.value) } - + const onSearch = () => { // 搜索逻辑已在计算属性中处理 } - + + const clearSearch = () => { + searchKeyword.value = '' + } + const setPetType = (type) => { currentPetType.value = type } - + const setCategory = (category) => { currentCategory.value = category } - + const setSort = (sort) => { currentSort.value = sort } - + const setViewMode = (mode) => { viewMode.value = mode } - + const showFilterModal = () => { showFilter.value = true } - + const toggleBrand = (brand) => { const index = selectedBrands.value.indexOf(brand) if (index > -1) { @@ -472,15 +658,24 @@ export default { selectedBrands.value.push(brand) } } - + const setPriceRange = (range) => { selectedPriceRange.value = range } - + const applyFilter = () => { showFilter.value = false } - + + const resetFilters = () => { + currentPetType.value = 'all' + currentCategory.value = 'all' + currentSort.value = 'rating' + selectedBrands.value = [] + selectedPriceRange.value = 'all' + viewMode.value = 'grid' + } + const toggleFavorite = (product) => { const index = favoritesList.value.indexOf(product.id) if (index > -1) { @@ -491,13 +686,13 @@ export default { product.isFavorite = true } saveFavorites() - + uni.showToast({ title: product.isFavorite ? '已收藏' : '已取消收藏', icon: 'success' }) } - + const viewProductDetail = (product) => { // 保存浏览历史 let history = uni.getStorageSync('reviewHistory') || [] @@ -513,7 +708,7 @@ export default { history = history.slice(0, 50) } uni.setStorageSync('reviewHistory', history) - + // 跳转到详情页 uni.navigateTo({ url: `/pages/review/detail?id=${product.id}`, @@ -525,7 +720,7 @@ export default { } }) } - + return { searchKeyword, currentPetType, @@ -541,6 +736,7 @@ export default { priceRanges, filteredProducts, onSearch, + clearSearch, setPetType, setCategory, setSort, @@ -549,6 +745,7 @@ export default { toggleBrand, setPriceRange, applyFilter, + resetFilters, toggleFavorite, viewProductDetail } @@ -565,168 +762,97 @@ export default { .search-section { padding: 20rpx 30rpx; - .search-bar { - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(20rpx); - border-radius: 24rpx; - padding: 16rpx; - box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1); - } -} - -/* 筛选区域 */ -.filter-section { - margin: 0 30rpx 20rpx 30rpx; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(20rpx); - border-radius: 20rpx; - padding: 20rpx; - box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1); - - .filter-tabs { - margin-bottom: 16rpx; - - .filter-scroll { - white-space: nowrap; - - .filter-list { - display: flex; - gap: 12rpx; - - .filter-item { - display: flex; - align-items: center; - padding: 12rpx 20rpx; - border-radius: 20rpx; - background: rgba(255, 138, 128, 0.1); - border: 2rpx solid transparent; - transition: all 0.3s ease; - white-space: nowrap; - - &.active { - background: linear-gradient(135deg, #FF8A80, #FFB6C1); - border-color: #FF8A80; - - .filter-text, - .filter-icon { - color: white; - } - } - - .filter-icon { - font-size: 24rpx; - margin-right: 6rpx; - } - - .filter-text { - font-size: 24rpx; - color: #666666; - } - } - } - } - } - - .filter-categories { - .category-scroll { - white-space: nowrap; - - .category-list { - display: flex; - gap: 12rpx; - - .category-item { - padding: 8rpx 16rpx; - border-radius: 16rpx; - background: rgba(255, 138, 128, 0.05); - border: 1rpx solid rgba(255, 138, 128, 0.2); - transition: all 0.3s ease; - white-space: nowrap; - - &.active { - background: rgba(255, 138, 128, 0.2); - border-color: #FF8A80; - - .category-text { - color: #FF8A80; - font-weight: 600; - } - } - - .category-text { - font-size: 22rpx; - color: #666666; - } - } - } - } - } -} - -/* 工具栏 */ -.toolbar-section { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 30rpx 20rpx 30rpx; - padding: 16rpx 20rpx; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(20rpx); - border-radius: 16rpx; - box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1); - - .sort-options { + .search-wrapper { display: flex; - gap: 20rpx; + align-items: center; + gap: 16rpx; - .sort-item { - padding: 8rpx 16rpx; - border-radius: 12rpx; - transition: all 0.3s ease; + .search-input-container { + flex: 1; + position: relative; + background: rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(255, 255, 255, 0.8); + border-radius: 24rpx; + padding: 0 20rpx; + display: flex; + align-items: center; + box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); - &.active { - background: rgba(255, 138, 128, 0.1); - - .sort-text { - color: #FF8A80; - font-weight: 600; - } - } - - .sort-text { + .search-icon { font-size: 24rpx; - color: #666666; + margin-right: 12rpx; + color: #666; } - } - } - .view-toggle { - display: flex; - background: rgba(255, 138, 128, 0.1); - border-radius: 12rpx; - padding: 4rpx; + .search-input { + flex: 1; + height: 72rpx; + font-size: 24rpx; + color: #333; + background: transparent; + border: none; + outline: none; - .toggle-item { - padding: 8rpx 12rpx; - border-radius: 8rpx; - transition: all 0.3s ease; - - &.active { - background: #FF8A80; - - .toggle-icon { - color: white; + &::placeholder { + color: #999; } } - .toggle-icon { + .search-clear { + width: 32rpx; + height: 32rpx; + background: rgba(0, 0, 0, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 12rpx; + transition: all 0.3s ease; + + &:active { + background: rgba(0, 0, 0, 0.2); + } + + .clear-icon { + font-size: 16rpx; + color: #666; + } + } + } + + .filter-btn { + display: flex; + align-items: center; + gap: 8rpx; + background: rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(255, 255, 255, 0.8); + border-radius: 16rpx; + padding: 16rpx 20rpx; + transition: all 0.3s ease; + box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); + + &:active { + transform: scale(0.95); + background: rgba(255, 255, 255, 0.8); + border-color: rgba(255, 255, 255, 0.9); + } + + .filter-icon { font-size: 20rpx; - color: #666666; + color: #666; + } + + .filter-text { + font-size: 22rpx; + color: #666; + font-weight: 500; } } } } + + /* 产品列表 */ .products-section { margin: 0 30rpx; @@ -926,72 +1052,119 @@ export default { } } -/* 浮动按钮 */ -.fab-container { - position: fixed; - bottom: 120rpx; - right: 40rpx; - z-index: 100; - .fab-button { - width: 80rpx; - height: 80rpx; - background: linear-gradient(135deg, #FF8A80, #FFB6C1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.4); - transition: all 0.3s ease; - &:active { - transform: scale(0.9); - } +/* 筛选面板 */ +.filter-panel { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20rpx); + padding: 24rpx 32rpx; + border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); + position: relative; + z-index: 10; + width: 100%; + box-sizing: border-box; - .fab-icon { - font-size: 32rpx; - color: white; - } - } -} - -/* 筛选弹窗 */ -.filter-modal { - padding: 20rpx 0; - - .filter-group { + .filter-section { margin-bottom: 32rpx; &:last-child { margin-bottom: 0; } - .group-title { - display: block; - font-size: 28rpx; - font-weight: 600; - color: #333333; + .filter-title { margin-bottom: 16rpx; + + .title-text { + font-size: 28rpx; + font-weight: 600; + color: #333333; + } } } - .brand-options { + .type-filters { display: flex; flex-wrap: wrap; gap: 12rpx; - .brand-item { + .type-filter { + display: flex; + align-items: center; padding: 12rpx 20rpx; border: 2rpx solid rgba(255, 138, 128, 0.2); border-radius: 20rpx; - transition: all 0.3s ease; + background: rgba(255, 255, 255, 0.8); &.active { border-color: #FF8A80; - background: rgba(255, 138, 128, 0.1); + background: linear-gradient(135deg, #FF8A80, #FFB6C1); + + .type-text, + .type-icon { + color: white; + font-weight: 600; + } + } + + .type-icon { + font-size: 24rpx; + margin-right: 6rpx; + color: #666666; + } + + .type-text { + font-size: 24rpx; + color: #666666; + } + } + } + + .category-filters { + display: flex; + flex-wrap: wrap; + gap: 12rpx; + + .category-filter { + padding: 12rpx 20rpx; + border: 2rpx solid rgba(255, 138, 128, 0.2); + border-radius: 20rpx; + background: rgba(255, 255, 255, 0.8); + + &.active { + border-color: #FF8A80; + background: linear-gradient(135deg, #FF8A80, #FFB6C1); + + .category-text { + color: white; + font-weight: 600; + } + } + + .category-text { + font-size: 24rpx; + color: #666666; + } + } + } + + .brand-filters { + display: flex; + flex-wrap: wrap; + gap: 12rpx; + + .brand-filter { + padding: 12rpx 20rpx; + border: 2rpx solid rgba(255, 138, 128, 0.2); + border-radius: 20rpx; + background: rgba(255, 255, 255, 0.8); + + &.active { + border-color: #FF8A80; + background: linear-gradient(135deg, #FF8A80, #FFB6C1); .brand-text { - color: #FF8A80; + color: white; font-weight: 600; } } @@ -1003,35 +1176,131 @@ export default { } } - .price-options { +.price-filters { + display: flex; + flex-wrap: wrap; + gap: 12rpx; + + .price-filter { + padding: 12rpx 20rpx; + border: 2rpx solid rgba(255, 138, 128, 0.2); + border-radius: 20rpx; + background: rgba(255, 255, 255, 0.8); + + &.active { + border-color: #FF8A80; + background: linear-gradient(135deg, #FF8A80, #FFB6C1); + + .price-text { + color: white; + font-weight: 600; + } + } + + .price-text { + font-size: 24rpx; + color: #666666; + } + } +} + +.other-filters { + .filter-row { + display: flex; + align-items: center; + margin-bottom: 16rpx; + + &:last-child { + margin-bottom: 0; + } + + .filter-label { + font-size: 24rpx; + color: #666666; + margin-right: 16rpx; + min-width: 80rpx; + } + } + + .sort-filters, + .view-filters { display: flex; - flex-wrap: wrap; gap: 12rpx; - .price-item { - padding: 12rpx 20rpx; + .sort-filter, + .view-filter { + padding: 8rpx 16rpx; border: 2rpx solid rgba(255, 138, 128, 0.2); - border-radius: 20rpx; - transition: all 0.3s ease; + border-radius: 16rpx; + background: rgba(255, 255, 255, 0.8); &.active { border-color: #FF8A80; - background: rgba(255, 138, 128, 0.1); + background: linear-gradient(135deg, #FF8A80, #FFB6C1); - .price-text { - color: #FF8A80; + .sort-text, + .view-text { + color: white; font-weight: 600; } } - .price-text { - font-size: 24rpx; + .sort-text, + .view-text { + font-size: 22rpx; color: #666666; } } } } +.filter-actions { + display: flex; + gap: 16rpx; + margin-top: 32rpx; + padding-top: 24rpx; + border-top: 1rpx solid rgba(255, 138, 128, 0.1); + + .filter-reset, + .filter-apply { + flex: 1; + padding: 16rpx 24rpx; + border-radius: 24rpx; + text-align: center; + transition: all 0.3s ease; + } + + .filter-reset { + background: rgba(255, 255, 255, 0.8); + border: 2rpx solid rgba(255, 138, 128, 0.3); + + &:active { + background: rgba(255, 255, 255, 0.6); + } + + .reset-text { + font-size: 28rpx; + color: #666666; + } + } + + .filter-apply { + background: linear-gradient(135deg, #FF8A80, #FFB6C1); + border: 2rpx solid #FF8A80; + + &:active { + transform: scale(0.98); + } + + .apply-text { + font-size: 28rpx; + color: white; + font-weight: 600; + } + } +} +} + /* 响应式设计 */ @media (max-width: 375px) { .review-container { @@ -1047,19 +1316,7 @@ export default { gap: 12rpx; } - .fab-container { - right: 30rpx; - bottom: 100rpx; - .fab-button { - width: 60rpx; - height: 60rpx; - - .fab-icon { - font-size: 28rpx; - } - } - } } } @@ -1075,18 +1332,7 @@ export default { } } -.review-container > view { - animation: fadeIn 0.5s ease-out; -} - -.review-container > view:nth-child(1) { animation-delay: 0.1s; } -.review-container > view:nth-child(2) { animation-delay: 0.2s; } -.review-container > view:nth-child(3) { animation-delay: 0.3s; } -.review-container > view:nth-child(4) { animation-delay: 0.4s; } - -.product-card { - animation: fadeIn 0.3s ease-out; -} +/* 移除全局动画效果以避免筛选面板闪烁 */ /* 交互反馈 */ .filter-item:active,