353 lines
7.2 KiB
Vue
353 lines
7.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 固定搜索栏 -->
|
||
<view class="fixed-search" :style="{ top: statusBaeHeight + 'px' }">
|
||
<view class="search-box" @tap="toSearch">
|
||
<view class="search-input-container">
|
||
<text class="search-placeholder">输入酒款名称，品牌名称，啤酒风格</text>
|
||
<view class="search-icon-container">
|
||
<uni-icons type="search" size="24" color="#fff"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选栏 -->
|
||
<view class="content-container" style="margin-top: 120rpx;">
|
||
<view class="bg-white filter-bar" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
|
||
<view class="choose-center bg-white">
|
||
<view class="flex align-center choose-navs">
|
||
<view class="" v-for="item in tabList" style="text-align: center;">
|
||
<view class="choose-navs-txt" @click="changeNavs(item.value)"
|
||
:class="actives==item.value?'actives':''">
|
||
{{item.label}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 专辑列表 -->
|
||
<view v-for="(item,i) in featurePageList" :key="i" class="bg-white feature-item">
|
||
<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
|
||
<view class="flex-1 flex flex-col">
|
||
<text class="title">{{ item.pageName }}</text>
|
||
<text class="sub">{{ item.subTitle}}</text>
|
||
</view>
|
||
<image src="@/static/arrow-right.svg" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<rowBeer :beers="item.beers" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getBannerList
|
||
} from '@/api/bar.js'
|
||
import {
|
||
listFeaturePage
|
||
} from '@/api/platform.js'
|
||
import rowBeer from '@/components/rowBeer.vue'
|
||
|
||
export default {
|
||
components: {
|
||
rowBeer,
|
||
},
|
||
data() {
|
||
return {
|
||
statusBaeHeight: 0,
|
||
featurePageList: [],
|
||
bgcolor: '#19367A',
|
||
tabList:[
|
||
{
|
||
label:'为您推荐',
|
||
value:'1'
|
||
},
|
||
{
|
||
label:'风格选酒',
|
||
value:'2'
|
||
},
|
||
{
|
||
label:'热门厂牌',
|
||
value:'3'
|
||
},
|
||
{
|
||
label:'新酒上市',
|
||
value:'4'
|
||
},
|
||
],
|
||
actives:'1',
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
||
this.getBannerListFun()
|
||
uni.showShareMenu({
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
})
|
||
this.actives = '1'
|
||
},
|
||
onShow() {
|
||
this.actives = '1'
|
||
this.getFeaturePageListFun() // 专辑页列表
|
||
},
|
||
|
||
methods: {
|
||
changeNavs(ind){
|
||
this.actives = ind
|
||
if(ind == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/activityList/styleSelection'
|
||
})
|
||
}else if(ind == 3){
|
||
//pages/activityList/hotLabel
|
||
uni.navigateTo({
|
||
url: '/pages/activityList/hotLabel'
|
||
})
|
||
}else if(ind == 4){
|
||
//pages/activityList/hotLabel
|
||
uni.navigateTo({
|
||
url: '/pages/index/newBeer'
|
||
})
|
||
}
|
||
},
|
||
// 搜索
|
||
toSearch() {
|
||
uni.navigateTo({
|
||
url: '/pagesActivity/homeSearch'
|
||
})
|
||
},
|
||
// 查询广告弹窗 banner列表
|
||
getBannerListFun() {
|
||
this.ADList = []
|
||
this.homeBanner = []
|
||
this.bannerJoin = null
|
||
getBannerList().then(res => {
|
||
res.data.forEach(it => {
|
||
if (it.bannerType == 'homeAD') { // 开屏广告
|
||
this.ADList.push(it)
|
||
} else if (it.bannerType == 'homeJoin') { // 认证门店
|
||
this.bannerJoin = it
|
||
} else if (it.bannerType == 'homeBanner') { // 首页banner
|
||
this.homeBanner.push(it)
|
||
}
|
||
|
||
})
|
||
|
||
let showHomeAD = uni.getStorageSync('showHomeAD')
|
||
if (!showHomeAD) {
|
||
|
||
this.$refs.ADRef.open()
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
// 关闭广告
|
||
closeAd() {
|
||
uni.setStorageSync('showHomeAD', true)
|
||
uni.setTabBarStyle({
|
||
backgroundColor: '#ffffff'
|
||
})
|
||
this.$refs.ADRef.close()
|
||
|
||
},
|
||
handleAD(item) {
|
||
this.closeAd()
|
||
if (item.bannerLink) {
|
||
uni.navigateTo({
|
||
url: item.bannerLink,
|
||
})
|
||
}
|
||
},
|
||
// 立即认证门店
|
||
toJoin() {
|
||
if (!this.bannerJoin) return
|
||
uni.navigateTo({
|
||
url: this.bannerJoin.bannerLink,
|
||
})
|
||
},
|
||
// 跳转专辑页
|
||
toFeaturePage(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/activityList/details`
|
||
})
|
||
},
|
||
// 查询专辑页列表
|
||
getFeaturePageListFun() {
|
||
listFeaturePage().then(res => {
|
||
this.featurePageList = res.data
|
||
})
|
||
},
|
||
// 跳转酒评页
|
||
toReview(it) {
|
||
uni.navigateTo({
|
||
url: "/pages/index/review?beerId=" + it.id
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 页面基础样式 */
|
||
.page {
|
||
background: #F9F9F9;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 固定搜索栏样式 */
|
||
.fixed-search {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1001; /* 提高导航栏层级 */
|
||
background-color: #19367A;
|
||
border-radius: 0 0 24rpx 24rpx;
|
||
padding: 20rpx 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 搜索框容器样式 */
|
||
.search-box {
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
/* 搜索输入框样式 */
|
||
.search-input-container {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
height: 80rpx;
|
||
position: relative;
|
||
}
|
||
|
||
/* 搜索框占位符文本样式 */
|
||
.search-placeholder {
|
||
flex: 1;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
position: relative;
|
||
}
|
||
|
||
/* 搜索图标容器样式 */
|
||
.search-icon-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-color: #D42E78;
|
||
border-radius: 0 30rpx 30rpx 0;
|
||
color: #fff;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
/* 内容区域容器样式 */
|
||
.content-container {
|
||
padding-top: 0rpx;
|
||
}
|
||
|
||
/* 筛选导航栏样式 */
|
||
.filter-bar {
|
||
position: sticky;
|
||
top:80rpx;
|
||
z-index: 1000;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
margin-top: -40rpx;
|
||
padding-top: 40rpx;
|
||
}
|
||
|
||
/* 筛选选项中心区域样式 */
|
||
.choose-center {
|
||
height: 112rpx;
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
/* 导航选项容器样式 */
|
||
.choose-navs {
|
||
// 导航选项的样式
|
||
font-family: Roboto;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 导航选项文本样式 */
|
||
.choose-navs-txt {
|
||
// 导航选项文本的样式
|
||
width: 144rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
border-radius: 12rpx;
|
||
background: #F9F9F9;
|
||
margin-right: 16rpx;
|
||
|
||
&.actives {
|
||
// 选中状态的样式
|
||
color: #FFF;
|
||
background: #D42E78;
|
||
}
|
||
}
|
||
|
||
/* 专辑标题区域样式 */
|
||
.title-box {
|
||
padding: 24rpx 32rpx;
|
||
// margin-bottom: 24rpx;
|
||
// margin-top: 24rpx;
|
||
}
|
||
|
||
/* 专辑主标题样式 */
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #030303;
|
||
font-weight: bold;
|
||
line-height: 48rpx;
|
||
letter-spacing: normal;
|
||
margin-bottom: 8rpx;
|
||
max-width: 500rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 专辑副标题样式 */
|
||
.sub {
|
||
font-family: Roboto;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
line-height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
letter-spacing: normal;
|
||
color: #606060;
|
||
margin-bottom: 8rpx;
|
||
max-width: 500rpx;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 专辑项样式 */
|
||
.feature-item {
|
||
margin: 24rpx 0; /* 上下间距24rpx */
|
||
border-radius: 24rpx 0rpx 0rpx 24rpx; /* 圆角 */
|
||
overflow: hidden; /* 确保内容不会溢出圆角 */
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
|
||
}
|
||
</style> |