492 lines
9.9 KiB
Vue
492 lines
9.9 KiB
Vue
<template>
|
||
<view class="page flex flex-col">
|
||
<!-- 月份筛选区域 -->
|
||
<view class="month-section">
|
||
<view class="title">
|
||
<text>新酒</text>
|
||
<text>上市</text>
|
||
</view>
|
||
<scroll-view
|
||
scroll-x
|
||
class="month-scroll"
|
||
:scroll-with-animation="true"
|
||
:show-scrollbar="false"
|
||
>
|
||
<view class="month-content">
|
||
<view
|
||
v-for="(it, index) in dataList"
|
||
:key="index"
|
||
class="month-item"
|
||
:class="{ active: currentMonthIndex === index }"
|
||
@tap="changeMonth(it, index)"
|
||
>
|
||
<view class="month-info">
|
||
<text class="month-num">{{it.month}}月</text>
|
||
<text class="count">共{{it.beerCount}}款</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 风格筛选区域 -->
|
||
<view class="style-section">
|
||
<scroll-view
|
||
scroll-x
|
||
class="style-scroll"
|
||
:scroll-with-animation="true"
|
||
:show-scrollbar="false"
|
||
>
|
||
<view class="style-content">
|
||
<view
|
||
v-for="(item, index) in styleList"
|
||
:key="index"
|
||
class="style-item"
|
||
:class="{ active: currentStyle === item.value }"
|
||
@tap="handleStyleChange(item)"
|
||
>
|
||
<text class="style-text">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 列表内容区域 -->
|
||
<view class="content-section">
|
||
<scroll-view scroll-y class="content-scroll">
|
||
<view class="list-wrapper">
|
||
<view
|
||
v-for="it in currentMonth"
|
||
:key="it.id"
|
||
class="list-group"
|
||
>
|
||
<view v-if="it.launchDate" class="date-header">
|
||
<image src="@/static/icons/direct-right.svg" class="date-icon" mode="aspectFit" />
|
||
<text class="date-day">{{ it.launchDate.slice(8, 10)}}</text>
|
||
<text class="date-month">/{{ it.launchDate.slice(5, 7)}}月</text>
|
||
</view>
|
||
<beer-card :item="it" @click="toBeer(it)"></beer-card>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty-tip">更多新品发布信息，敬请关注更新~</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getLastSixMonth,
|
||
getNewBeerListByMonth,
|
||
popularStyle
|
||
} from "@/api/platform.js";
|
||
import BeerCard from '@/components/BeerCard.vue';
|
||
|
||
export default {
|
||
components: {
|
||
BeerCard
|
||
},
|
||
data() {
|
||
return {
|
||
dataList: [],
|
||
currentMonth: [],
|
||
currentMonthIndex: 0,
|
||
currentStyle: 'all',
|
||
styleList: [
|
||
{ label: '全部', value: 'all' },
|
||
{ label: 'IPA', value: 'ipa' },
|
||
{ label: '拉格', value: 'lager' },
|
||
{ label: '艾尔', value: 'ale' },
|
||
{ label: '西打', value: 'cider' },
|
||
{ label: '其他', value: 'other' }
|
||
],
|
||
queryForm: {
|
||
num: null
|
||
}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getLastSixMonthFun();
|
||
},
|
||
methods: {
|
||
changeMonth(item, index) {
|
||
this.currentMonthIndex = index;
|
||
this.currentMonth = item.beers;
|
||
this.queryForm.num = index;
|
||
this.getNewBeerListByMonthFun();
|
||
},
|
||
getLastSixMonthFun() {
|
||
getLastSixMonth().then(res => {
|
||
console.log(res);
|
||
this.dataList = res.data;
|
||
this.queryForm.num = 0;
|
||
this.getNewBeerListByMonthFun();
|
||
});
|
||
},
|
||
toBeer(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/review?beerId=' + item.id
|
||
});
|
||
},
|
||
getNewBeerListByMonthFun() {
|
||
getNewBeerListByMonth(this.queryForm).then(res => {
|
||
console.log(res);
|
||
this.currentMonth = res.data;
|
||
});
|
||
},
|
||
handleStyleChange(item) {
|
||
if (this.currentStyle === item.value) return;
|
||
this.currentStyle = item.value;
|
||
|
||
// 根据选择的风格类型设置查询参数
|
||
if (item.value === 'all') {
|
||
this.queryForm.style = '';
|
||
} else if (item.value === 'other') {
|
||
// 其他类别：排除主要类别
|
||
this.queryForm.style = '!ipa,!lager,!ale,!cider';
|
||
} else {
|
||
// 主要类别：直接使用对应的值
|
||
this.queryForm.style = item.value;
|
||
}
|
||
|
||
this.getNewBeerListByMonthFun();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #F9F9F9;
|
||
|
||
// 月份筛选区域样式
|
||
.month-section {
|
||
height: 136rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
// 左侧"新酒上市"标题
|
||
.title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 64rpx;
|
||
margin: 0 32rpx 0 32rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -32rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 32rpx;
|
||
height: 100%;
|
||
background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||
z-index: 2;
|
||
}
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #0B0E26;
|
||
line-height: 44rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
|
||
// 月份滚动区域
|
||
.month-scroll {
|
||
flex: 1;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 0;
|
||
|
||
// 月份内容
|
||
.month-content {
|
||
height: 100%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0 64rpx 0 32rpx;
|
||
|
||
// 月份项
|
||
.month-item {
|
||
position: relative;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 48rpx;
|
||
flex-shrink: 0;
|
||
padding: 0 8rpx;
|
||
|
||
// 最后一个月份项
|
||
&:last-child {
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
// 月份信息展示
|
||
.month-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.month-num { // 月份数字
|
||
font-size: 32rpx;
|
||
color: #606060;
|
||
line-height: 1;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.count { // 数量统计
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
// 选中状态样式
|
||
&.active {
|
||
&::after { // 日历形状边框
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 108rpx;
|
||
height: 88rpx;
|
||
border: 2rpx solid #D42E78;
|
||
border-radius: 8rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
&::before { // 顶部装饰条
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 32rpx;
|
||
height: 4rpx;
|
||
background: #D42E78;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
// 选中状态文字颜色
|
||
.month-info {
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
.month-num {
|
||
color: #D42E78;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.count {
|
||
color: #D42E78;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 风格筛选区域样式
|
||
.style-section {
|
||
position: sticky;
|
||
top: 80rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
margin-top: -12rpx;
|
||
|
||
.style-scroll {
|
||
.style-content {
|
||
height: 112rpx;
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
|
||
// 风格项
|
||
.style-item {
|
||
position: relative;
|
||
height: 64rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
|
||
&:last-child {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
// 风格文本
|
||
.style-text {
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #F9F9F9;
|
||
font-size: 28rpx;
|
||
color: #606060;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 选中状态样式
|
||
&.active {
|
||
.style-text {
|
||
color: #FFFFFF;
|
||
background: #D42E78;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容区域样式
|
||
.content-section {
|
||
flex: 1;
|
||
|
||
.content-scroll {
|
||
// 计算剩余可滚动高度
|
||
height: calc(100vh - 260rpx - env(safe-area-inset-bottom));
|
||
|
||
.list-wrapper {
|
||
padding: 24rpx 32rpx;
|
||
|
||
.list-group {
|
||
margin-bottom: 24rpx;
|
||
|
||
// 日期分组
|
||
.date-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
// 日期图标
|
||
.date-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
// 日期数字
|
||
.date-day {
|
||
font-size: 36rpx;
|
||
color: #030303;
|
||
font-weight: 600;
|
||
}
|
||
|
||
// 月份数字
|
||
.date-month {
|
||
font-size: 24rpx;
|
||
color: #606060;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
// 酒卡样式
|
||
.beer-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
// 酒卡图片
|
||
.beer-image {
|
||
width: 144rpx;
|
||
height: 204rpx;
|
||
margin-right: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #F8F8F8;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
// 酒卡信息
|
||
.beer-info {
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
min-height: 204rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
// 主信息
|
||
.main-info {
|
||
margin-bottom: 24rpx;
|
||
|
||
.beer-name {
|
||
font-size: 32rpx;
|
||
color: #030303;
|
||
font-weight: 600;
|
||
margin-bottom: 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
// 副信息
|
||
.sub-info {
|
||
margin-bottom: 16rpx;
|
||
|
||
// 风格名称
|
||
.beer-style {
|
||
font-size: 26rpx;
|
||
color: #606060;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 24rpx;
|
||
color: #606060;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 箭头图标
|
||
.arrow-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
opacity: 0.3;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
// 点击效果
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 空提示
|
||
.empty-tip {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 32rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 文本省略
|
||
.text-ellipsis {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
</style> |