607 lines
12 KiB
Vue
607 lines
12 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 筛选导航 -->
|
|
<view class="filter-nav">
|
|
<view
|
|
v-for="(item, index) in filterList"
|
|
:key="index"
|
|
class="filter-item"
|
|
:class="{'active': item.active}"
|
|
@click="handleFilterClick(index)"
|
|
>
|
|
<text class="filter-text">{{ item.title }}</text>
|
|
<image
|
|
class="filter-icon"
|
|
:src="item.active ? '/static/arrow-bottom@1x.png' : '/static/arrow-bottom@1x.png'"
|
|
:style="{ transform: item.active ? 'rotate(180deg)' : 'rotate(0deg)' }"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选弹出层 -->
|
|
<view class="filter-popup" v-if="showPopup">
|
|
<view class="popup-mask" @click="closePopup"></view>
|
|
<view class="popup-content">
|
|
<!-- 品牌筛选 -->
|
|
<scroll-view
|
|
v-if="currentFilter === 0"
|
|
scroll-y
|
|
class="option-list"
|
|
>
|
|
<view
|
|
v-for="(brand, index) in filterOptions.brands"
|
|
:key="index"
|
|
class="option-item"
|
|
:class="{'active': selectedFilters.brandId === brand.value}"
|
|
@click="selectOption('brandId', brand.value)"
|
|
>
|
|
{{ brand.label }}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 风格筛选 -->
|
|
<scroll-view
|
|
v-if="currentFilter === 1"
|
|
scroll-y
|
|
class="option-list"
|
|
>
|
|
<view
|
|
v-for="(style, index) in filterOptions.styles"
|
|
:key="index"
|
|
class="option-item"
|
|
:class="{'active': selectedFilters.styleId === style.value}"
|
|
@click="selectOption('styleId', style.value)"
|
|
>
|
|
{{ style.label }}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 价格筛选 -->
|
|
<view v-if="currentFilter === 2" class="price-filter">
|
|
<view class="price-range">
|
|
<input
|
|
type="number"
|
|
v-model="selectedFilters.priceMin"
|
|
class="price-input"
|
|
placeholder="最低价"
|
|
/>
|
|
<text class="price-separator">-</text>
|
|
<input
|
|
type="number"
|
|
v-model="selectedFilters.priceMax"
|
|
class="price-input"
|
|
placeholder="最高价"
|
|
/>
|
|
</view>
|
|
<button class="confirm-btn" @click="confirmPrice">确定</button>
|
|
</view>
|
|
|
|
<!-- 排序筛选 -->
|
|
<view v-if="currentFilter === 3" class="option-list">
|
|
<view
|
|
v-for="(sort, index) in filterOptions.sortOptions"
|
|
:key="index"
|
|
class="option-item"
|
|
:class="{'active': selectedFilters.sortType === sort.value}"
|
|
@click="selectOption('sortType', sort.value)"
|
|
>
|
|
{{ sort.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计信息 -->
|
|
<view class="stats-bar">
|
|
<text class="stats-text">共 {{totalBeers}} 款在售酒款</text>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-container">
|
|
<scroll-view
|
|
scroll-y
|
|
class="beer-list"
|
|
@scrolltolower="loadMore"
|
|
refresher-enabled
|
|
:refresher-triggered="isRefreshing"
|
|
@refresherrefresh="onRefresh"
|
|
>
|
|
<view
|
|
class="beer-card"
|
|
v-for="beer in beerList"
|
|
:key="beer.id"
|
|
@click="navigateToBeerDetail(beer)"
|
|
>
|
|
<beer-card :item="beer"></beer-card>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<template v-if="beerList.length === 0">
|
|
<view class="empty-state">
|
|
<text class="empty-text">暂无相关酒款</text>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="loading-status">
|
|
<view v-if="loading" class="loading-wrapper">
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
<text v-else-if="!hasMore && beerList.length > 0" class="no-more">没有更多了</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getBreweries, getBeerList } from '@/api/bar.js'
|
|
import { popularStyle } from "@/api/platform.js"
|
|
import BeerCard from '@/components/BeerCard.vue'
|
|
|
|
export default {
|
|
components: {
|
|
BeerCard
|
|
},
|
|
data() {
|
|
return {
|
|
// 筛选相关
|
|
showPopup: false,
|
|
currentFilter: -1,
|
|
filterList: [
|
|
{ title: '品牌', active: false },
|
|
{ title: '风格', active: false },
|
|
{ title: '价格', active: false },
|
|
{ title: '排序', active: false }
|
|
],
|
|
filterOptions: {
|
|
brands: [],
|
|
styles: [],
|
|
sortOptions: [
|
|
{ label: '综合排序', value: 'comprehensive' },
|
|
{ label: '最新发布', value: 'latest' },
|
|
{ label: '人气优先', value: 'popular' },
|
|
{ label: '高分优先', value: 'rating' }
|
|
]
|
|
},
|
|
selectedFilters: {
|
|
brandId: '',
|
|
styleId: '',
|
|
priceMin: '',
|
|
priceMax: '',
|
|
sortType: 'comprehensive'
|
|
},
|
|
|
|
// 列表数据
|
|
beerList: [],
|
|
totalBeers: 0,
|
|
loading: false,
|
|
isRefreshing: false,
|
|
hasMore: true,
|
|
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
// 初始化数据
|
|
async initData() {
|
|
try {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
|
|
await Promise.all([
|
|
this.getBrandOptions(),
|
|
this.getStyleOptions()
|
|
])
|
|
|
|
await this.getBeerList()
|
|
|
|
uni.hideLoading()
|
|
} catch (error) {
|
|
console.error('初始化数据失败:', error)
|
|
uni.showToast({
|
|
title: '加载失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取品牌选项
|
|
async getBrandOptions() {
|
|
try {
|
|
const res = await getBreweries({
|
|
pageSize: 100
|
|
})
|
|
if (res.code === 200 && res.data) {
|
|
this.filterOptions.brands = (res.data.list || []).map(item => ({
|
|
label: item.name,
|
|
value: item.id
|
|
}))
|
|
}
|
|
} catch (error) {
|
|
console.error('获取品牌列表失败:', error)
|
|
}
|
|
},
|
|
|
|
// 获取风格选项
|
|
async getStyleOptions() {
|
|
try {
|
|
const res = await popularStyle()
|
|
if (res.code === 200 && res.data) {
|
|
this.filterOptions.styles = (res.data || []).map(item => ({
|
|
label: item.name,
|
|
value: item.id
|
|
}))
|
|
}
|
|
} catch (error) {
|
|
console.error('获取风格列表失败:', error)
|
|
}
|
|
},
|
|
|
|
// 获取啤酒列表
|
|
async getBeerList(isRefresh = false) {
|
|
if (this.loading) return
|
|
|
|
try {
|
|
this.loading = true
|
|
if (isRefresh) {
|
|
this.queryParams.pageNum = 1
|
|
this.beerList = []
|
|
}
|
|
|
|
const params = {
|
|
...this.queryParams,
|
|
...this.selectedFilters
|
|
}
|
|
|
|
const res = await getBeerList(params)
|
|
if (res.code === 200) {
|
|
const list = res.rows || []
|
|
if (this.queryParams.pageNum === 1) {
|
|
this.beerList = list
|
|
} else {
|
|
this.beerList = [...this.beerList, ...list]
|
|
}
|
|
this.totalBeers = res.total || 0
|
|
this.hasMore = list.length >= this.queryParams.pageSize
|
|
}
|
|
} catch (error) {
|
|
console.error('获取啤酒列表失败:', error)
|
|
uni.showToast({
|
|
title: '加载失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
this.isRefreshing = false
|
|
}
|
|
},
|
|
|
|
// 筛选相关方法
|
|
handleFilterClick(index) {
|
|
if (this.currentFilter === index) {
|
|
this.closePopup()
|
|
} else {
|
|
this.filterList.forEach((item, i) => {
|
|
item.active = i === index
|
|
})
|
|
this.currentFilter = index
|
|
this.showPopup = true
|
|
}
|
|
},
|
|
|
|
closePopup() {
|
|
this.showPopup = false
|
|
this.filterList.forEach(item => {
|
|
item.active = false
|
|
})
|
|
this.currentFilter = -1
|
|
},
|
|
|
|
selectOption(key, value) {
|
|
if (this.selectedFilters[key] === value) {
|
|
this.selectedFilters[key] = ''
|
|
} else {
|
|
this.selectedFilters[key] = value
|
|
}
|
|
this.closePopup()
|
|
this.getBeerList(true)
|
|
},
|
|
|
|
confirmPrice() {
|
|
this.closePopup()
|
|
this.getBeerList(true)
|
|
},
|
|
|
|
// 列表相关方法
|
|
loadMore() {
|
|
if (!this.hasMore || this.loading) return
|
|
this.queryParams.pageNum++
|
|
this.getBeerList()
|
|
},
|
|
|
|
async onRefresh() {
|
|
this.isRefreshing = true
|
|
await this.getBeerList(true)
|
|
},
|
|
|
|
// 导航方法
|
|
navigateToBeerDetail(beer) {
|
|
uni.navigateTo({
|
|
url: `/pages/index/review?beerId=${beer.id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #F9F9F9;
|
|
|
|
// 筛选导航
|
|
.filter-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
background: #fff;
|
|
// margin-top: 24rpx;
|
|
padding: 24rpx 12rpx;
|
|
|
|
.filter-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 64rpx;
|
|
margin: 0 12rpx;
|
|
padding: 0 20rpx;
|
|
background: #F9F9F9;
|
|
border-radius: 12rpx;
|
|
transition: all 0.3s ease;
|
|
margin-top: 12rpx;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
&.active {
|
|
background: rgba(212, 46, 120, 0.05);
|
|
|
|
.filter-text {
|
|
color: #D42E78;
|
|
font-weight: 500;
|
|
}
|
|
.filter-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.filter-text {
|
|
font-size: 24rpx;
|
|
color: #606060;
|
|
margin-right: 8rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.filter-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 筛选弹出层
|
|
.filter-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
|
|
.popup-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.popup-content {
|
|
position: absolute;
|
|
top: 124rpx;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
padding: 24rpx;
|
|
max-height: 60vh;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
.option-list {
|
|
max-height: 50vh;
|
|
|
|
.option-item {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
&.active {
|
|
color: #D42E78;
|
|
font-weight: 500;
|
|
background: rgba(212, 46, 120, 0.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
.price-filter {
|
|
padding: 24rpx;
|
|
|
|
.price-range {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 32rpx;
|
|
|
|
.price-input {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 28rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:focus {
|
|
background: #fff;
|
|
box-shadow: 0 0 0 2rpx rgba(212, 46, 120, 0.2);
|
|
}
|
|
}
|
|
|
|
.price-separator {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
padding: 0 24rpx;
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
background: #D42E78;
|
|
color: #fff;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 统计信息
|
|
.stats-bar {
|
|
padding: 24rpx 32rpx;
|
|
background: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.stats-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// 内容区域
|
|
.content-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 0 24rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.beer-list {
|
|
height: calc(100vh - 300rpx);
|
|
|
|
.beer-card {
|
|
margin-bottom: 24rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 160rpx 0;
|
|
text-align: center;
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
font-weight: 500;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
.loading-status {
|
|
padding: 24rpx 0;
|
|
text-align: center;
|
|
|
|
.loading-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.loading-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
&::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4rpx;
|
|
height: 4rpx;
|
|
border-radius: 50%;
|
|
background-color: #999;
|
|
margin-left: 6rpx;
|
|
animation: loading 1s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-more {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
100% { opacity: 1; }
|
|
}
|
|
</style> |