feat: 优化新酒页面布局，配置啤啤猩球对接
This commit is contained in:
davy
parent
e5441ad5de
commit
9c4f90af02
@ -1,3 +1,4 @@
|
|||||||
// export const base_url = 'http://121.37.100.169:9090'
|
// export const base_url = 'http://121.37.100.169:9090'
|
||||||
export const base_url = 'https://ma.zdtap.com'
|
// export const base_url = 'https://ma.zdtap.com'
|
||||||
|
export const base_url = 'https://pipi.zdtap.com'
|
||||||
// export const base_url = 'http://39.104.21.219:28082'
|
// export const base_url = 'http://39.104.21.219:28082'
|
||||||
@ -20,7 +20,7 @@ export default (params) => {
|
|||||||
// }
|
// }
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.request({
|
uni.request({
|
||||||
url: base_url + url,
|
url: base_url +'/api'+ url,
|
||||||
method: method,
|
method: method,
|
||||||
header: header,
|
header: header,
|
||||||
data: data,
|
data: data,
|
||||||
|
|||||||
@ -1,72 +1,119 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page flex flex-col">
|
<view class="page">
|
||||||
<!-- <CustomNavBar title="风格选酒" :bgcolor="bgcolor"/> -->
|
<!-- 筛选导航 -->
|
||||||
<view>
|
<view class="filter-section">
|
||||||
|
<view class="filter-tabs">
|
||||||
|
<view
|
||||||
|
v-for="(tab, index) in dropdownMenuList"
|
||||||
|
:key="tab.prop"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ active: activeTab === tab.prop }"
|
||||||
|
@click="$refs.filterDropdown.toggleMenu(index)"
|
||||||
|
>
|
||||||
|
<text class="tab-text">{{ tab.title }}</text>
|
||||||
|
<image
|
||||||
|
class="tab-icon"
|
||||||
|
:class="{ up: activeTab === tab.prop }"
|
||||||
|
:src="activeTab === tab.prop ? '/static/icons/arrow-active.png' : '/static/icons/arrow.png'"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<Sieving
|
<Sieving
|
||||||
ref="daDropdown"
|
ref="filterDropdown"
|
||||||
:dropdownMenu="dropdownMenuList"
|
:dropdownMenu="dropdownMenuList"
|
||||||
themeColor="#333"
|
themeColor="#D42E78"
|
||||||
@confirm="handleConfirm"
|
@confirm="handleFilterConfirm"
|
||||||
@close="handleClose"
|
@close="handleFilterClose"
|
||||||
@open="handleOpen">
|
@open="handleFilterOpen"
|
||||||
<!-- <template v-slot:slot2="{item,index}">
|
/>
|
||||||
<view style="padding: 20px">
|
|
||||||
自定义插槽内容，更多业务
|
|
||||||
<button @click="$refs.daDropdown.closeMenuPopup()">关闭</button>
|
|
||||||
</view>
|
</view>
|
||||||
</template> -->
|
|
||||||
</Sieving>
|
|
||||||
</view>
|
|
||||||
<view class="" style="margin: 20rpx 0;font-size: 24rpx;color: #606060;padding-left: 32rpx;">
|
|
||||||
<view class="" @click="showStyle">共{{}}款在售酒款</view>
|
|
||||||
</view>
|
|
||||||
<view class="container flex-1">
|
|
||||||
|
|
||||||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
<!-- 统计信息 -->
|
||||||
<view style="width: 100%;" v-for="it in currentMonth">
|
<view class="stats-bar">
|
||||||
<!-- <view v-if="it.launchDate" style="color: #979797;font-size: 24rpx;margin-bottom: 8rpx;">
|
<text class="stats-text">共 {{totalBeers}} 款在售酒款</text>
|
||||||
<text
|
</view>
|
||||||
style="font-size: 36rpx;">{{ it.launchDate.slice(8, 10)}}</text>/<text>{{ it.launchDate.slice(5, 7)}}</text>月
|
|
||||||
</view> -->
|
|
||||||
<view class="beerItem">
|
|
||||||
<view class="beerCard flex align-center" @click="toBeer(it)">
|
|
||||||
<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
|
||||||
<view class="flex-1">
|
|
||||||
|
|
||||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">
|
<!-- 内容区域 -->
|
||||||
{{it.beerName}}
|
<view class="content-container">
|
||||||
</view>
|
<scroll-view
|
||||||
<view class="word-all margin-bottom-sm"
|
scroll-y
|
||||||
style="font-size: 24rpx;color: rgba(30, 32, 25, 0.8);">{{ it.beerStyles}}
|
class="beer-list"
|
||||||
</view>
|
@scrolltolower="loadMore"
|
||||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ it.brandName}}</view>
|
refresher-enabled
|
||||||
</view>
|
:refresher-triggered="isRefreshing"
|
||||||
<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
|
@refresherrefresh="onRefresh"
|
||||||
</image>
|
>
|
||||||
|
<view
|
||||||
|
class="beer-card"
|
||||||
|
v-for="beer in beerList"
|
||||||
|
:key="beer.id"
|
||||||
|
@click="navigateToBeerDetail(beer)"
|
||||||
|
>
|
||||||
|
<view class="beer-info">
|
||||||
|
<image
|
||||||
|
:src="beer.cover"
|
||||||
|
class="beer-image"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
<view class="beer-details">
|
||||||
|
<text class="beer-name text-ellipsis">{{beer.beerName}}</text>
|
||||||
|
<text class="beer-style text-ellipsis">{{beer.beerStyles}}</text>
|
||||||
|
<text class="brand-name text-ellipsis">{{beer.brandName}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<image
|
||||||
|
src="/static/icons/arrow-right.png"
|
||||||
|
class="arrow-icon"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view style="width: 100%;color: #979797;margin-top: 60rpx;margin-bottom: 60rpx;text-align: center;">更多新品发布信息，敬请关注更新~</view>
|
<!-- 加载状态 -->
|
||||||
|
<template v-if="beerList.length === 0 && !loading">
|
||||||
|
<view class="empty-state">
|
||||||
|
<image src="/static/images/empty.png" class="empty-image" />
|
||||||
|
<text class="empty-text">暂无相关酒款</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view class="loading-status" v-else>
|
||||||
|
<view v-if="loading" class="loading-wrapper">
|
||||||
|
<image src="/static/images/loading.gif" class="loading-icon" />
|
||||||
|
<text class="loading-text">加载中...</text>
|
||||||
|
</view>
|
||||||
|
<text v-else-if="!hasMore" class="no-more">没有更多了</text>
|
||||||
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="flex align-center justify-between tip">
|
|
||||||
<text>开启新酒上枪通知，第一时间获取新酒资讯</text>
|
<!-- 风格筛选弹窗 -->
|
||||||
<image src="@/static/add.png" style="width: 32rpx;height: 32rpx;"></image>
|
<uni-popup
|
||||||
</view> -->
|
ref="stylePopup"
|
||||||
<uni-popup ref="popup" type="right" background-color="#fff">
|
type="right"
|
||||||
<scroll-view scroll-y="true" style="height: 90%;">
|
background-color="#fff"
|
||||||
<view v-for="(item, index) in popularStyleList" :key="index" class="padding"
|
>
|
||||||
@click="searchByStyle(item)">
|
<view class="style-popup">
|
||||||
<!-- <view class="flex-1"> -->
|
<scroll-view
|
||||||
<view class="word-all" :class="{active: item.beerStyles == queryForm.style}" >{{ item.beerStyles}}</view>
|
scroll-y
|
||||||
<!-- <view class="sub">全系列{{item.popular}}款产品在售</view> -->
|
class="style-list"
|
||||||
<!-- </view> -->
|
>
|
||||||
|
<view
|
||||||
|
v-for="style in popularStyleList"
|
||||||
|
:key="style.id"
|
||||||
|
class="style-item"
|
||||||
|
:class="{'active': selectedStyle === style.beerStyles}"
|
||||||
|
@click="selectStyle(style)"
|
||||||
|
>
|
||||||
|
<text class="style-name">{{ style.beerStyles }}</text>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="flex justify-center clearBtn" style="margin-top: 40rpx;" @click="clear">清除筛选</view>
|
<view
|
||||||
|
class="clear-button"
|
||||||
|
@click="clearFilter"
|
||||||
|
>
|
||||||
|
清除筛选
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -76,289 +123,365 @@
|
|||||||
getLastSixMonth,
|
getLastSixMonth,
|
||||||
getNewBeerListByMonth,
|
getNewBeerListByMonth,
|
||||||
popularStyle,
|
popularStyle,
|
||||||
|
getBrands,
|
||||||
|
getBeerStyles,
|
||||||
} from "@/api/platform.js"
|
} from "@/api/platform.js"
|
||||||
import CustomNavBar from '@/components/CustomNavBar.vue'
|
import CustomNavBar from '@/components/CustomNavBar.vue'
|
||||||
import Sieving from '@/components/sieving/index.vue'
|
import Sieving from '@/components/sieving/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'StyleSelection',
|
||||||
components: {
|
components: {
|
||||||
CustomNavBar,
|
CustomNavBar,
|
||||||
Sieving
|
Sieving
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataList: [],
|
// 列表数据
|
||||||
currentMonth: [],
|
beerList: [],
|
||||||
currentMonthIndex: 0,
|
totalBeers: 0,
|
||||||
|
loading: false,
|
||||||
|
isRefreshing: false,
|
||||||
|
hasMore: true,
|
||||||
|
|
||||||
|
// 筛选相关
|
||||||
|
selectedStyle: '',
|
||||||
popularStyleList: [],
|
popularStyleList: [],
|
||||||
queryForm: {
|
|
||||||
num: null
|
// 查询参数
|
||||||
},
|
queryParams: {
|
||||||
bgcolor:'#19367A',
|
pageNum: 1,
|
||||||
dropdownMenuList: [
|
pageSize: 10,
|
||||||
{
|
sortType: 'latest',
|
||||||
title: '类型',
|
style: ''
|
||||||
type: 'cell',
|
|
||||||
prop: 'god1',
|
|
||||||
showAll: true,
|
|
||||||
showIcon: true,
|
|
||||||
value: '2', // 默认内容2
|
|
||||||
options: [
|
|
||||||
{ label: '综合排序', value: '1' },
|
|
||||||
// { label: '下拉列表项1', value: '1', suffix: '可插入副标题' },
|
|
||||||
{ label: '好评最多', value: '2' },
|
|
||||||
{ label: '距离最近', value: '3' },
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 筛选配置
|
||||||
|
dropdownMenuList: [
|
||||||
{
|
{
|
||||||
title: '口味',
|
title: '品牌',
|
||||||
type: 'filter',
|
type: 'cell',
|
||||||
prop: 'god4',
|
prop: 'brand',
|
||||||
// 默认选中单选2、多选2、3、滑动30
|
value: '',
|
||||||
value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
|
options: [],
|
||||||
options: [
|
|
||||||
{
|
|
||||||
title: '口味（单选）',
|
|
||||||
type: 'radio',
|
|
||||||
prop: 'ft1',
|
|
||||||
options: [
|
|
||||||
{ label: '酱香', value: '1' },
|
|
||||||
{ label: '麻辣', value: '2' },
|
|
||||||
{ label: '特辣', value: '3' },
|
|
||||||
{ label: '微微辣', value: '4' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '配菜（可多选）',
|
|
||||||
type: 'checkbox',
|
|
||||||
prop: 'ft2',
|
|
||||||
options: [
|
|
||||||
{ label: '香菜', value: '1' },
|
|
||||||
{ label: '辣椒', value: '2' },
|
|
||||||
{ label: '折耳根', value: '3' },
|
|
||||||
{ label: '蒜泥', value: '4' },
|
|
||||||
{ label: '耗油', value: '5' },
|
|
||||||
{ label: '精品牛肉酱', value: '6' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '糖度',
|
|
||||||
type: 'slider',
|
|
||||||
prop: 'ft3',
|
|
||||||
componentProps: {
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
step: 1,
|
|
||||||
showValue: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '区域',
|
|
||||||
type: 'picker',
|
|
||||||
prop: 'god5',
|
|
||||||
showAll: true,
|
|
||||||
showIcon: true,
|
showIcon: true,
|
||||||
field: {
|
activeColor: '#D42E78'
|
||||||
label: 'label',
|
|
||||||
value: 'value',
|
|
||||||
children: 'children',
|
|
||||||
},
|
|
||||||
value: ['2', '2-2'], // 默认选中 级联X22
|
|
||||||
options: [{
|
|
||||||
label: '广东省',
|
|
||||||
value: '1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '佛山市',
|
|
||||||
value: '1-1',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '深圳市',
|
title: '风格',
|
||||||
value: '1-2',
|
type: 'cell',
|
||||||
|
prop: 'style',
|
||||||
|
value: '',
|
||||||
|
options: [],
|
||||||
|
showIcon: true,
|
||||||
|
activeColor: '#D42E78'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '价格',
|
||||||
|
type: 'slider',
|
||||||
|
prop: 'price',
|
||||||
|
value: {
|
||||||
|
min: 100,
|
||||||
|
max: 3000
|
||||||
|
},
|
||||||
|
showIcon: true,
|
||||||
|
activeColor: '#D42E78'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排序',
|
||||||
|
type: 'cell',
|
||||||
|
prop: 'sort',
|
||||||
|
value: 'comprehensive',
|
||||||
|
showIcon: true,
|
||||||
|
activeColor: '#D42E78',
|
||||||
|
options: [
|
||||||
|
{ label: '不限', value: 'comprehensive' },
|
||||||
|
{ label: '高分优先', value: 'rating' },
|
||||||
|
{ label: '热门优先', value: 'popular' },
|
||||||
|
{ label: '最新发布', value: 'latest' }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
created() {
|
||||||
label: '海南省',
|
this.initData()
|
||||||
value: '2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '海口市',
|
|
||||||
value: '2-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '儋州市',
|
|
||||||
value: '2-2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '三亚市',
|
|
||||||
value: '2-3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '浙江省',
|
|
||||||
value: '3',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '杭州市',
|
|
||||||
value: '3-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '宁波市',
|
|
||||||
value: '3-2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '嘉兴市',
|
|
||||||
value: '3-3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '日期',
|
|
||||||
type: 'daterange',
|
|
||||||
prop: 'god6',
|
|
||||||
// 默认选中 2022-01-01到2022-02-01
|
|
||||||
value: { start: '2022-01-01', end: '2022-02-01' },
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: '插槽',
|
|
||||||
// type: 'slot2',
|
|
||||||
// prop: 'god2',
|
|
||||||
// showArrow: true,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '排序',
|
|
||||||
// type: 'sort',
|
|
||||||
// prop: 'god3',
|
|
||||||
// value: 'asc', // 默认升序
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
this.getPopularStyle()
|
|
||||||
this.getLastSixMonthFun()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 初始化数据
|
||||||
|
async initData() {
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
this.getPopularStyles(),
|
||||||
|
this.getBeerList()
|
||||||
|
])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('初始化数据失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 获取热门风格
|
// 获取热门风格
|
||||||
getPopularStyle() {
|
async getPopularStyles() {
|
||||||
popularStyle().then(res => {
|
try {
|
||||||
console.log(res)
|
const res = await popularStyle()
|
||||||
this.popularStyleList = res.data
|
this.popularStyleList = res.data || []
|
||||||
|
} 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 res = await getNewBeerListByMonth(this.queryParams)
|
||||||
|
const newList = res.data || []
|
||||||
|
|
||||||
|
this.beerList = isRefresh ?
|
||||||
|
newList : [...this.beerList, ...newList]
|
||||||
|
this.totalBeers = res.total || 0
|
||||||
|
this.hasMore = newList.length >= this.queryParams.pageSize
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取啤酒列表失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: '加载失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
})
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
this.isRefreshing = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
changeMonth(item, index) {
|
|
||||||
this.currentMonthIndex = index
|
// 筛选相关方法
|
||||||
this.currentMonth = item.beers
|
handleFilterConfirm(value, allValues) {
|
||||||
this.queryForm.num = index
|
const { brand, style, price, sort } = allValues
|
||||||
this.getNewBeerListByMonthFun()
|
|
||||||
|
this.queryParams = {
|
||||||
|
...this.queryParams,
|
||||||
|
brandId: brand,
|
||||||
|
styleId: style,
|
||||||
|
priceMin: price?.min,
|
||||||
|
priceMax: price?.max,
|
||||||
|
sortType: sort
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sort === 'comprehensive') {
|
||||||
|
this.queryParams.weights = {
|
||||||
|
popular: 0.5,
|
||||||
|
rating: 0.3,
|
||||||
|
latest: 0.2
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
delete this.queryParams.weights
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getBeerList(true)
|
||||||
},
|
},
|
||||||
getLastSixMonthFun() {
|
|
||||||
getLastSixMonth().then(res => {
|
handleFilterOpen(tabName) {
|
||||||
console.log(res)
|
this.queryParams.style = tabName
|
||||||
this.dataList = res.data
|
|
||||||
this.queryForm.num = 0
|
|
||||||
this.getNewBeerListByMonthFun()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 跳转酒款详情
|
|
||||||
toBeer(item) {
|
handleFilterClose() {
|
||||||
|
this.queryParams.style = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
selectStyle(style) {
|
||||||
|
this.selectedStyle = style.beerStyles
|
||||||
|
this.queryParams.style = style.beerStyles
|
||||||
|
this.getBeerList(true)
|
||||||
|
this.$refs.stylePopup.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
clearFilter() {
|
||||||
|
this.selectedStyle = ''
|
||||||
|
this.queryParams.style = ''
|
||||||
|
this.getBeerList(true)
|
||||||
|
this.$refs.stylePopup.close()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 列表相关方法
|
||||||
|
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({
|
uni.navigateTo({
|
||||||
url: '/pages/index/review?beerId=' + item.id
|
url: `/pages/index/review?beerId=${beer.id}`
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
showStyle() {
|
|
||||||
this.$refs.popup.open()
|
|
||||||
},
|
|
||||||
searchByStyle(item) {
|
|
||||||
this.queryForm.style = item.beerStyles
|
|
||||||
this.getNewBeerListByMonthFun()
|
|
||||||
this.$refs.popup.close()
|
|
||||||
},
|
|
||||||
// 获取新酒列表
|
|
||||||
getNewBeerListByMonthFun() {
|
|
||||||
getNewBeerListByMonth(this.queryForm).then(res => {
|
|
||||||
console.log(res)
|
|
||||||
this.currentMonth = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clear() {
|
|
||||||
delete this.queryForm.style
|
|
||||||
this.$refs.popup.close()
|
|
||||||
this.getNewBeerListByMonthFun()
|
|
||||||
},
|
|
||||||
handleConfirm(v, selectedValue) {
|
|
||||||
console.log('当前项: ', v)
|
|
||||||
console.log('---------------')
|
|
||||||
console.log('全部项目(所有): ', selectedValue)
|
|
||||||
},
|
|
||||||
handleClose(v, callbackMenuList) {
|
|
||||||
// console.log('handleClose ==>', v, callbackMenuList)
|
|
||||||
},
|
|
||||||
handleOpen(v) {
|
|
||||||
// console.log('handleOpen ==>', v)
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
background: #F2F2F2;
|
background: #F2F2F2;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
.filter-section {
|
||||||
.container {
|
background: #FFFFFF;
|
||||||
height: calc(100vh - 182rpx);
|
border-bottom: 1rpx solid #F5F5F5;
|
||||||
margin-top: -24rpx;
|
|
||||||
border-radius: 12rpx;
|
.filter-tabs {
|
||||||
padding: 32rpx;
|
display: flex;
|
||||||
background: #F2F2F2;
|
align-items: center;
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
height: 64rpx;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding: 0 32rpx;
|
||||||
.style-btn {
|
|
||||||
border-radius: 12rpx;
|
.tab-item {
|
||||||
background: #39E5B1;
|
width: 122rpx;
|
||||||
font-family: Roboto;
|
height: 64rpx;
|
||||||
font-size: 24rpx;
|
display: flex;
|
||||||
color: #0B0E26;
|
align-items: center;
|
||||||
padding: 6rpx 10rpx;
|
justify-content: center;
|
||||||
}
|
font-size: 28rpx;
|
||||||
.beerItem {
|
color: #606060;
|
||||||
// padding-left: 18rpx;
|
position: relative;
|
||||||
// margin-left: 18rpx;
|
margin-right: 24rpx;
|
||||||
// border-left: 4rpx dashed #FFF;
|
|
||||||
.beerCard {
|
.tab-text {
|
||||||
border-radius: 12rpx;
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
|
||||||
|
&.up {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #D42E78;
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
filter: invert(36%) sepia(75%) saturate(1217%)
|
||||||
|
hue-rotate(308deg) brightness(87%) contrast(98%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-bar {
|
||||||
|
padding: 20rpx 32rpx;
|
||||||
|
|
||||||
|
.stats-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #606060;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
.beer-list {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
|
||||||
|
.beer-card {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
padding: 24rpx 24rpx 20rpx;
|
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.beer-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx;
|
||||||
|
|
||||||
|
.beer-image {
|
||||||
|
width: 144rpx;
|
||||||
|
height: 204rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beer-details {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.beer-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #1E2019;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beer-style {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(30, 32, 25, 0.7);
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #606060;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip {
|
.style-popup {
|
||||||
padding: 0 30rpx 0 48rpx;
|
height: 100%;
|
||||||
border-radius: 12rpx;
|
display: flex;
|
||||||
background: rgba(254, 224, 52, 0.36);
|
flex-direction: column;
|
||||||
height: 64rpx;
|
|
||||||
position: fixed;
|
.style-list {
|
||||||
bottom: env(safe-area-inset-bottom);
|
flex: 1;
|
||||||
width: 100%;
|
padding: 32rpx;
|
||||||
color: #5E5F60;
|
|
||||||
font-size: 20rpx;
|
.style-item {
|
||||||
|
padding: 24rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #19367A;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.active {
|
|
||||||
color: #FFC700;
|
|
||||||
}
|
}
|
||||||
.clearBtn {
|
|
||||||
font-size: 24rpx;
|
.clear-button {
|
||||||
color: #5E5F60;
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #606060;
|
||||||
|
border-top: 1rpx solid #F5F5F5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-ellipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,71 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="page flex flex-col">
|
<view class="page flex flex-col">
|
||||||
<view class="top flex align-center">
|
<!-- 月份筛选区域 -->
|
||||||
<view style="font-size: 32rpx;width: 64rpx;flex-shrink: 0;">
|
<view class="month-section">
|
||||||
新酒上市
|
<view class="title">
|
||||||
|
<text>新酒</text>
|
||||||
|
<text>上市</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="scroll-container">
|
<scroll-view
|
||||||
<view v-for="(it, index) in dataList" style="text-align: center;"
|
scroll-x
|
||||||
:class="{active : currentMonthIndex == index}" @click="changeMonth(it, index)">
|
class="month-scroll"
|
||||||
<view style="font-size: 32rpx;">{{ it.month}}月</view>
|
:scroll-with-animation="true"
|
||||||
<view style="font-size: 20rpx;">共{{ it.beerCount}}款</view>
|
:show-scrollbar="false"
|
||||||
</view>
|
>
|
||||||
</view>
|
<view class="month-content">
|
||||||
|
<view
|
||||||
</view>
|
v-for="(it, index) in dataList"
|
||||||
|
:key="index"
|
||||||
<view class="container flex-1">
|
class="month-item"
|
||||||
<view class="flex justify-end">
|
:class="{ active: currentMonthIndex === index }"
|
||||||
<view class="style-btn" @click="showStyle">
|
@tap="changeMonth(it, index)"
|
||||||
<text>筛选</text>
|
>
|
||||||
<image src="@/static/icons/filter.svg" style="width: 40rpx;height: 40rpx;"/>
|
<view class="month-info">
|
||||||
</view>
|
<text class="month-num">{{it.month}}月</text>
|
||||||
</view>
|
<text class="count">共{{it.beerCount}}款</text>
|
||||||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
|
||||||
<view style="width: 100%;" v-for="it in currentMonth">
|
|
||||||
<view v-if="it.launchDate" style="color: #0B0E26;font-size: 24rpx;margin-bottom: 8rpx;">
|
|
||||||
<image src="@/static/icons/direct-right.svg" style="width: 28rpx;height: 28rpx;" mode=""></image>
|
|
||||||
<text
|
|
||||||
style="font-size: 36rpx;margin-left: 8rpx;">{{ it.launchDate.slice(8, 10)}}</text>/<text>{{ it.launchDate.slice(5, 7)}}</text>月
|
|
||||||
</view>
|
|
||||||
<view class="beerItem">
|
|
||||||
<view class="beerCard flex align-center" @click="toBeer(it)">
|
|
||||||
<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
|
||||||
<view class="flex-1">
|
|
||||||
|
|
||||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">
|
|
||||||
{{it.beerName}}
|
|
||||||
</view>
|
|
||||||
<view class="word-all margin-bottom-sm"
|
|
||||||
style="font-size: 24rpx;color: rgba(30, 32, 25, 0.8);">{{ it.beerStyles}}
|
|
||||||
</view>
|
|
||||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ it.brandName}}</view>
|
|
||||||
</view>
|
|
||||||
<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
|
|
||||||
</image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view style="width: 100%;color: #979797;margin-top: 60rpx;margin-bottom: 60rpx;text-align: center;">更多新品发布信息，敬请关注更新~</view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="flex align-center justify-between tip">
|
|
||||||
<text>开启新酒上枪通知，第一时间获取新酒资讯</text>
|
<!-- 风格筛选区域 -->
|
||||||
<image src="@/static/add.png" style="width: 32rpx;height: 32rpx;"></image>
|
<view class="style-section">
|
||||||
</view> -->
|
<scroll-view
|
||||||
<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="32rpx 32rpx 0 0">
|
scroll-x
|
||||||
<shaiXuan></shaiXuan>
|
class="style-scroll"
|
||||||
</uni-popup>
|
:scroll-with-animation="true"
|
||||||
<!-- <uni-popup ref="popup" type="right" background-color="#fff">
|
:show-scrollbar="false"
|
||||||
<scroll-view scroll-y="true" style="height: 90%;">
|
>
|
||||||
<view v-for="(item, index) in popularStyleList" :key="index" class="padding"
|
<view class="style-content">
|
||||||
@click="searchByStyle(item)">
|
<view
|
||||||
<view class="word-all" :class="{active: item.beerStyles == queryForm.style}" >{{ item.beerStyles}}</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>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="flex justify-center clearBtn" style="margin-top: 40rpx;" @click="clear">清除筛选</view>
|
</view>
|
||||||
</uni-popup> -->
|
|
||||||
|
<!-- 列表内容区域 -->
|
||||||
|
<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>
|
||||||
|
<view class="beer-card" @tap="toBeer(it)">
|
||||||
|
<image :src="it.cover" class="beer-image" mode="aspectFit" />
|
||||||
|
<view class="beer-info">
|
||||||
|
<view class="main-info">
|
||||||
|
<text class="beer-name text-ellipsis">{{it.beerName}}</text>
|
||||||
|
<view class="sub-info">
|
||||||
|
<text class="beer-style text-ellipsis">{{it.beerStyles}}</text>
|
||||||
|
<text class="brand-name text-ellipsis">{{it.brandName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image src="@/static/right-arrow.png" class="arrow-icon" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="empty-tip">更多新品发布信息，敬请关注更新~</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -75,34 +93,31 @@
|
|||||||
getNewBeerListByMonth,
|
getNewBeerListByMonth,
|
||||||
popularStyle,
|
popularStyle,
|
||||||
} from "@/api/platform.js"
|
} from "@/api/platform.js"
|
||||||
import shaiXuan from '@/components/shaiXuan.vue';
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
shaiXuan,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dataList: [],
|
dataList: [],
|
||||||
currentMonth: [],
|
currentMonth: [],
|
||||||
currentMonthIndex: 0,
|
currentMonthIndex: 0,
|
||||||
popularStyleList: [],
|
currentStyle: 'all',
|
||||||
|
styleList: [
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: 'IPA', value: 'ipa' },
|
||||||
|
{ label: '拉格', value: 'lager' },
|
||||||
|
{ label: '艾尔', value: 'ale' },
|
||||||
|
{ label: '西打', value: 'cider' },
|
||||||
|
{ label: '其他', value: 'other' }
|
||||||
|
],
|
||||||
queryForm: {
|
queryForm: {
|
||||||
num: null
|
num: null
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getPopularStyle()
|
|
||||||
this.getLastSixMonthFun()
|
this.getLastSixMonthFun()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取热门风格
|
|
||||||
getPopularStyle() {
|
|
||||||
popularStyle().then(res => {
|
|
||||||
console.log(res)
|
|
||||||
this.popularStyleList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeMonth(item, index) {
|
changeMonth(item, index) {
|
||||||
this.currentMonthIndex = index
|
this.currentMonthIndex = index
|
||||||
this.currentMonth = item.beers
|
this.currentMonth = item.beers
|
||||||
@ -117,30 +132,32 @@
|
|||||||
this.getNewBeerListByMonthFun()
|
this.getNewBeerListByMonthFun()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 跳转酒款详情
|
|
||||||
toBeer(item) {
|
toBeer(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/index/review?beerId=' + item.id
|
url: '/pages/index/review?beerId=' + item.id
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showStyle() {
|
|
||||||
this.$refs.popup.open()
|
|
||||||
},
|
|
||||||
searchByStyle(item) {
|
|
||||||
this.queryForm.style = item.beerStyles
|
|
||||||
this.getNewBeerListByMonthFun()
|
|
||||||
this.$refs.popup.close()
|
|
||||||
},
|
|
||||||
// 获取新酒列表
|
|
||||||
getNewBeerListByMonthFun() {
|
getNewBeerListByMonthFun() {
|
||||||
getNewBeerListByMonth(this.queryForm).then(res => {
|
getNewBeerListByMonth(this.queryForm).then(res => {
|
||||||
console.log(res)
|
console.log(res)
|
||||||
this.currentMonth = res.data
|
this.currentMonth = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
clear() {
|
handleStyleChange(item) {
|
||||||
delete this.queryForm.style
|
if (this.currentStyle === item.value) return
|
||||||
this.$refs.popup.close()
|
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()
|
this.getNewBeerListByMonthFun()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -148,92 +165,348 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.page {
|
.page {
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
background: #F2F2F2;
|
background: #F9F9F9;
|
||||||
|
|
||||||
|
// 月份筛选区域样式
|
||||||
|
.month-section {
|
||||||
|
height: 136rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// 左侧"新酒上市"标题
|
||||||
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-family: Roboto;
|
align-items: center;
|
||||||
.top {
|
justify-content: center;
|
||||||
width: 100%;
|
width: 64rpx;
|
||||||
height: 172rpx;
|
margin: 0 32rpx 0 32rpx;
|
||||||
// background: #3D3D3D;
|
flex-shrink: 0;
|
||||||
// color: #FFFFFF;
|
position: relative;
|
||||||
color:#030303;
|
z-index: 1;
|
||||||
background: #FFF;
|
|
||||||
|
&::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;
|
font-weight: 600;
|
||||||
padding: 0 32rpx;
|
color: #0B0E26;
|
||||||
box-sizing: border-box;
|
line-height: 44rpx;
|
||||||
.scroll-container {
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 月份滚动区域
|
||||||
|
.month-scroll {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
// margin: 32rpx 0 0 0;
|
||||||
justify-content: space-around;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
// 月份内容
|
||||||
|
.month-content {
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
padding: 0 64rpx 0 32rpx;
|
||||||
white-space: nowrap;
|
// 月份项
|
||||||
|
.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;
|
color: #606060;
|
||||||
.active {
|
line-height: 1;
|
||||||
color: #FFC700;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
// 风格筛选区域样式
|
||||||
// height: calc(100vh - 182rpx); ;
|
.style-section {
|
||||||
// // margin-top: -10rpx;
|
position: sticky;
|
||||||
// border-radius: 12rpx;
|
top: 80rpx;
|
||||||
// padding: 32rpx;
|
background: #FFFFFF;
|
||||||
// background: #F2F2F2;
|
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||||
// padding-bottom: constant(safe-area-inset-bottom);
|
margin-top: -12rpx; // 添加顶部间距
|
||||||
// padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
height: calc(100vh - 172rpx - env(safe-area-inset-bottom)); // 扣除顶部高度和底部安全区域
|
.style-scroll {
|
||||||
border-radius: 12rpx;
|
.style-content {
|
||||||
padding: 32rpx;
|
height: 112rpx;
|
||||||
background: #F2F2F2;
|
width: 100%;
|
||||||
overflow: hidden;
|
padding: 24rpx;
|
||||||
.style-btn {
|
background: #FFFFFF;
|
||||||
border-radius: 12rpx;
|
|
||||||
background: #D42E78;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFF;
|
|
||||||
padding: 12rpx 16rpx 12rpx 24rpx;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
white-space: nowrap;
|
||||||
.beerItem {
|
// 风格项
|
||||||
// padding-left: 18rpx;
|
.style-item {
|
||||||
// margin-left: 18rpx;
|
position: relative;
|
||||||
// border-left: 4rpx dashed #FFF;
|
height: 64rpx;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.beerCard {
|
&:last-child {
|
||||||
|
margin-right: 32rpx;
|
||||||
|
}
|
||||||
|
// 风格文本
|
||||||
|
.style-text {
|
||||||
|
height: 64rpx;
|
||||||
|
line-height: 64rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
border-radius: 12rpx;
|
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;
|
background: #FFFFFF;
|
||||||
padding: 24rpx 24rpx 20rpx;
|
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;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip {
|
.brand-name {
|
||||||
padding: 0 30rpx 0 48rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
background: rgba(254, 224, 52, 0.36);
|
|
||||||
height: 64rpx;
|
|
||||||
position: fixed;
|
|
||||||
bottom: env(safe-area-inset-bottom);
|
|
||||||
width: 100%;
|
|
||||||
color: #5E5F60;
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
color: #FFC700;
|
|
||||||
}
|
|
||||||
.clearBtn {
|
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #5E5F60;
|
color: #606060;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 品牌信息
|
||||||
|
.store-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// 品牌图标
|
||||||
|
.store-icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
// 品牌名称
|
||||||
|
.store-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #606060;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
// 评分信息
|
||||||
|
.rating {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
// 评分数字
|
||||||
|
.rating-num {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFC700;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
// 评论数量
|
||||||
|
.review-count {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 箭头图标
|
||||||
|
.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>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user